萨斯插值变量名字符串

Question

我们提供相关的一些具体悬停状态的颜色颜色：

$red: #cb333b; 
$red-hover: #fe666e; 
$brown: #544742; 
$brown-hover: #877a75; 
etc. 

由于所有的颜色都格式化以同样的方式，所以我希望写一个mixin取得颜色的变量名称，然后连接-hover到最后。这是我第一次尝试：

@mixin button_colorizor($color) { 
    border-color: $color; 
    color: $color; 
    &:hover { 
    color: #{$color}-hover; 
    border-color: #{$color}-hover; 
    } 
} 

但这样做是输出一种颜色像这样：#f1735f-hover。同样的事情，当我这样做：color: #{$color+-hover};

Answer 1

您可以创建颜色的地图。并通过名称获取颜色值。

Demo on sassmeister。

$colors: (
    red: #cb333b, 
    red-hover: #fe666e, 
    brown: #544742, 
    brown-hover: #877a75 
); 

@mixin button_colorizor($color) { 
    color: map-get($colors, $color); 
    border-color: map-get($colors, $color); 

    &:hover { 
    color: map-get($colors, $color + '-hover'); 
    border-color: map-get($colors, $color + '-hover'); 
    } 
} 

a { 
    @include button_colorizor(red); 
} 

span { 
    @include button_colorizor(brown); 
} 

该代码被编译为CSS：

a { 
    color: #cb333b; 
    border-color: #cb333b; 
} 
a:hover { 
    color: #fe666e; 
    border-color: #fe666e; 
} 

span { 
    color: #544742; 
    border-color: #544742; 
} 
span:hover { 
    color: #877a75; 
    border-color: #877a75; 
}