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

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

}

Answer 2

我知道你不能扩展mixin - 你包括一个mixin，这正是我在第一行尝试完成的事情“.include - ＃{nth（$ tests，$ i）} {@ include _＃{nth（$ tests，$ i）};}“。mixin是“_something1”，占位符是“％something1”（它本身包含_somethiing1） - 它们是相同的输出。但是，目的不同。.include-something1将用于媒体查询和其他“超出范围”的容量，其中extend无法实现所需的效果。