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

Question

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

例如：

$colors:
    red,
    blue,
    green;

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

（我已经简化了我的示例代码，以便于说明）。

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

IE：

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