Sass/Compass从变量获取变量名

我正在尝试创建一个mixin，它可以让我根据您使用的变量名创建适应的代码块

$foo: #00A9EC;
@mixin menu-color($color) {
.color-#{$color} a.level2,
.color-#{$color} a.level2:visited {
    color: $color;
    &:hover {
        color: adjust-lightness($color, 10); }
    &:active {
        color: adjust-lightness($color, -10); } } }

@include menu-color($foo);

产出：

.color-foo a.level2,
.color-foo a.level2:visited {
    color: #00A9EC; }

.color-foo a.level2:hover,
.color-foo a.level2:visited:hover {
        color: #20C0FF; }

.color-foo a.level2:active,
.color-foo a.level2:visited:active {
        color: #0084B9; }

---

您不应该以特定的颜色命名CSS类。你会后悔的。试想一下，如果您想在以后使颜色变为红色，您需要重新检查所有html并更改类

我们使用CSS的原因是，您不必在标记中嵌入样式信息

使用语义类描述数据，而不是数据的显示方式：

$foo: #00A9EC;

@mixin menu-color($name, $color) {
.custom-#{$name} a.level2,
.custom-#{$name} a.level2:visited {
    color: $color;
    &:hover {
        color: adjust-lightness($color, 10); }
    &:active {
        color: adjust-lightness($color, -10); } } }

@include menu-color(profile, $foo);

然后在你的HTML中

---

这样，两年后，当你想把它变成黑色，加下划线（或其他什么），你就不必在html中翻找，给所有这些元素添加一个新的“.下划线和黑色”类。您只需在一个位置更改SCS。

在sass中，您可以使用map执行此操作，您只需传递变量名而不是变量本身：

$colors: ( 
    -black: #000,
    -blue: #088DC6
);

@mixin generateBgColor($colorName) {
    .bg-color#{$colorName} {
        background-color: map-get($colors, $colorName);
    }
}

@include generateBgColor("-blue");

这将生成一个类：

.bg-color-blue {
    background-color: #088DC6;
}

使用标准变量也可以在less中实现这一点，只需使用花括号和双精度字符：

@blue: #088DC6;

.generate-bg-color(@color) {
    .bg-color-@{color} {
        background-color: @@color;
    }
}

.generate-bg-color(~"blue");

---

OP不一定要说他想要使用颜色的名称，但解决方案是一样的：你必须传递你想要调用的颜色以及它应该是的值。一个变量只知道它包含什么值，它不知道你把它称为

$foo

或

$highlight

或

$major

或诸如此类的东西。好吧，所以没有办法只把$foo中的'foo'去掉并打印出来？不。这甚至不是Sass的限制。我所知道的语言中没有一种能做到这一点。实际上php有这种功能。在php中，您可以声明一个带有一个美元符号的变量：$my_var。如果您想获得变量的名称，可以再附加一个美元符号，这样就得到了：$my_var_name=$$my_var。如果sass允许这种功能，那就太好了。@cimmanon C#有一个可以返回变量名称的nameof（）表达式。