实时引用sass/scss变量
问题描述:
我正在尝试使用mixin来实现以下功能。实时引用sass/scss变量
我有一个社交按钮列表。除背景色和悬停状态外,它们每个都共享相同的样式。
我目前的SASS方法。 (将返回无效的CSS错误)
@mixin btn-social($network) {
.#{$network} {
background: $#{$network}; // trying to reference a global variable
&:hover, &:focus {
background: darken($#{$network}, $darken-modifier);
}
}
}
为了使这样的:
.facebook {
background: blue; // stored in $facebook
}
.facebook:hover, .facebook:focus {
background: darkblue; //darkend value above
}
我莫名其妙缺乏合适的条款适当的谷歌搜索。我会很高兴向正确的方向推进。
感谢您的帮助。
答
可以使用SASS地图存储颜色变量,然后使用您传递到您的mixin,像这样jsfiddle名称找到合适的颜色:
$colors: (
facebook: blue,
twitter: red
);
$darken-modifier: 100%;
@mixin btn-social($network) {
.#{$network} {
background: map-get($colors, $network);
&:hover, &:focus {
background: darken(map-get($colors, $network), $darken-modifier);
}
}
}
@include btn-social(facebook);
@include btn-social(twitter);
<a class="facebook">
facebook
</a>
<a class="twitter">
twitter
</a>
编辑:更新在下面包括@ TomOakley的建议。
答
请尝试以下方法:
@mixin btn-social($network, $color, $darkColor) {
#{$network} {
background: $color;
&:hover, &:focus {
background: $darkColor;
}
}
}
.foo {
@include btn-social('.facebook', blue, darkblue)
}
这编译为:
.foo .facebook {
background: blue;
}
.foo .facebook:hover, .foo .facebook:focus {
background: darkblue;
}
退房this reference社科院插值。
在OP的问题中,他在mixin中包含类名,使用'$ network'作为类参考。这很容易在你的例子中完成,只需在'。{{network} {// content}'中包装mixin内容,然后就可以在CSS中删除'.facebook {}'和'.twitter {}'只需使用'@include btn-social(facebook);'。 –
@TomOakley感谢您的建议,我已经更新了答案 –