萨斯插值变量名字符串
问题描述:
我们提供相关的一些具体悬停状态的颜色颜色:萨斯插值变量名字符串
$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};
答
您可以创建颜色的地图。并通过名称获取颜色值。
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;
}
+0
对于后代,我仍然使用当前的变量名.''' //颜色变量用于colorizor mixin中。 $颜色:( 红:$红, 红悬停:$红悬停, 桃:$桃, 桃悬停:$桃悬停, 棕色:$棕色, 棕悬停:$棕色 - hover, );''' – icicleking
+0
是的,好主意。 – 3rdthemagical
见http://*.com/questions/18501130/is-it-possible-to-nest-variables-within-variables-in -sass –