Question

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

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

正如您在标记中看到的那样，我尝试在插值字符串内部以及外部字符串中包含“_”。是否有一些我不知道如何解决Sass如何支持插值的限制？

（注意：OP的笔已经消失。这不是笔中的原始代码，而是问题的粗略近似值）

$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;
  }
}

Answer 1

此时插值对mixins或变量不起作用。你必须想出一个不同的方法来实现你的目标。

从Sass 3.3开始，您可以为变量使用映射：

$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');
}

混合，函数和变量名称的Sass插值

1 个答案: