Mixin、函数和变量名的 Sass 插值 [英] Sass Interpolation of Mixin, Function, and Variable names

问题描述

我正在尝试遍历 Sass 中的值列表，并使用当前键的插值来动态输出分别使用 @include 和 @extend 的类名.

I'm trying to loop through a list of values in Sass and use interpolation of the current key to dynamically output class names that utilize @include and @extend, respectively.

这是一个显示问题的笔，简化了.http://codepen.io/ghepting/pen/vBmLy

Here is a pen showing the problem, simplified. http://codepen.io/ghepting/pen/vBmLy

正如您在标记中看到的那样，我尝试在插值字符串的内部和外部包含_".是否有什么我缺少的东西可以解决 Sass 如何支持插值的这种限制?

As you can see in the markup, I have tried including the "_" inside of the interpolated string as well as outside of it. Is there something I'm missing to work around this limitation of how Sass supports interpolation?

(注意:OP的笔已经消失了.这不是笔中找到的原始代码，而是问题的粗略近似)

(Note: the OP's pen has disappeared. This is not the original code found in the pen, but a rough approximation of the problem)

$error-light: red;
$error-dark: darken(red, 10%);

$success-light: green;
$success-dark: darken(green, 10%);

$dialogs: error, success;

@each $d in $dialogs {
  .#{$d} {
    background: $#{$d}-light;
  }
}

推荐答案

此时插值对 mixin 或变量不起作用.你必须想出不同的方式来实现你的目标.

Interpolation doesn't work on mixins or variables at this point in time. You'll have to come up with a different way to achieve your goal.

从 Sass 3.3 开始，您可以为此目的对变量使用映射:

As of Sass 3.3, you can use mappings for this purpose for variables:

$dialogs:
    ( error:
        ( light: red
        , dark: darken(red, 10%)
        )
    , success:
        ( light: green
        , dark: darken(green, 10%)
        )
    );

@each $name, $colors in $dialogs {
  .#{$name} {
      color: map-get($colors, dark);
  }
}

对于函数:

@function green() {
  @return lighten(green, 10%);
}

@function red() {
  @return lighten(red, 10%);
}

@mixin my-bg($function-name) {
  background: call($function-name);
}

.foo {
  @include my-bg('red');
}

这篇关于Mixin、函数和变量名的 Sass 插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！