Question

我正在尝试遍历一个自动执行多个功能的列表。不幸的是，该功能未被评估。

例如：

$colors:
    red,
    blue,
    green;

@each $color in $colors{
    .color-#{$color} {
        value: $color(#F15258);
    }
}

（我简化了我的示例代码，以便更容易说明）。

不幸的是，这只输出$key的值和颜色#F15258。

即：

value: red #F15258;

我可以让SASS将变量作为函数名称传递，以便它实际上评估`red（＃F15258）吗？

应输出：

value: 241;

有什么想法吗？

Answer 1

从Sass 3.3开始，您可以使用call()函数执行此操作：

$colors:
    'red',
    'blue',
    'green';

@each $color in $colors{
    .color-#{$color} {
        value: call($color, #F15258);
    }
}

输出：

.color-red {
  value: 241;
}

.color-blue {
  value: 88;
}

.color-green {
  value: 82;
}

请注意，您的变量必须是一个字符串：red是一个颜色而'red'是一个字符串。

Answer 2

SASS不允许动态名称，这是一件好事。

要使用动态名称，您必须在编译之前使用模板生成SASS。了解Compass如何做到：https://stackoverflow.com/a/16129685/901944

这大大增加了项目的复杂性，我强烈反对。

而是使用一个接受名称作为参数的函数：

@function parse-color($color) {
   // Do whatever you want here
}

.color-red {
  color: parse-color(red);
}

请注意，您可以将第二种颜色硬编码为默认值的参数：

@function parse-color($first-color,
                      $second-color: #F15258) {
  // Do whatever you want here
  // For example:
  @return mix($first-color, $second-color);
}

$colors:
    red,
    blue,
    green;

@each $color in $colors{
    .color-#{$color} {
        color: parse-color($color);
    }
}

观看演示：http://sassbin.com/gist/6193779/

Answer 3

具有多个值的变量在sass中称为列表。所以，你可以列出如下列表： -

$colors: red blue green; //list of colors
@each $color in $colors{
    .color-#{$color} {
        color: ($color);
    }
}

我可以使用变量作为函数名吗？

3 个答案: