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

【问题标题】：Can I use a variable for a function name?我可以使用变量作为函数名吗？
【发布时间】：2015-05-28 00:49:38
【问题描述】：

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

例如：

$colors:
    red,
    blue,
    green;

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

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

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

即：

value: red #F15258;

我可以让 SASS 将变量作为函数名称传递，以便它实际评估 `red(#F15258)？

它应该输出：

value: 241;

有什么想法吗？

【问题讨论】：

你有更好的例子来说明你正在尝试做什么吗？可能有解决办法，但目前无法通过这种方式解决。
我正在尝试遍历一个列表，因此我不必分别为每个颜色通道执行相同的一组值。这是我试图减少的代码示例。 codepen.io/sevenupcan/pen/iHkby
如果我正在编写代码，它只会使用第二个函数而不是循环：codepen.io/cimmanon/pen/tyqdK。在这种情况下，循环不是很有效，因为您只有一个真正通用的代码块。开头调用的函数（红色、蓝色、绿色）和结尾处的调整会减少代码重用。
谢谢，这看起来更好，虽然我认为它需要另一个函数，因为通道 var 除以 255，但它需要通道的颜色值除以 255。
@johnslegers 由于您的编辑被拒绝，请作为另一个答案提交。

标签： function variables sass

【解决方案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' 是一个字符串。

【讨论】：

感谢您提供此问题的链接。悲伤的时光。 :)
在被拒绝的编辑中提到该功能已添加到 SASS 3.3。 sass-lang.com/documentation/Sass/Script/…
谢谢。很高兴看到这现在成为可能。 :)

【解决方案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/

【讨论】：

嗨，谢谢。不幸的是，这对我不起作用，因为我要做的就是减少代码以使其更易于维护，为此我需要为每个循环使用不同的函数。如果您有兴趣，我已经添加了一个示例。 codepen.io/sevenupcan/pen/iHkby
哇，这是一些难以维护的代码！您首先要解决什么任务？
哈哈。我正在创建一个函数，它会告诉你两种颜色的对比度。我已经创建了它，但它有点笨拙。
那么你为什么不同意使用contrast-ratio($color1, $color2) 而不是red-contrast-ratio($color2) 之类的一堆函数呢？
我不确定我是否理解。我目前拥有的只是一个接受两个参数的函数。只是对于每个通道，我必须针对每个通道相同的许多事物进行测试，期望获得相关颜色的相应 rgb 值的函数，这需要每个通道的不同函数。即red()、blue()和green()。

【解决方案3】：

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

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

【讨论】：

OP 不想显示红色、蓝色和绿色，他们想在特定颜色上运行函数红色、蓝色和绿色。完全不是一回事。