我有一个mixin,我以“元素”作为参数。
@mixin themeParent ($child) {
&--blue #{$child} {
color: getColour("theme", "bluehighlight");
}
&--green #{$child} {
color: getColour("theme", "greenhighlight");
}
&--purple #{$child} {
color: getColour("theme", "purplehighlight");
}
&--gossamer #{$child} {
color: getColour("theme", "gossamerhighlight");
}
&--black #{$child} {
color: getColour("theme", "black");
}
}
例如,如果我引用的是a
或p
,则此方法很好
HTML
<div class="div--blue">
<a>blue link</a>
</div>
SCSS
div {
@include themeParent(a);
}
但是我还想将mixin用于伪元素,例如。
div {
@include themeParent(a:hover);
}
或
div {
@include themeParent(>a:hover);
}
div {
@include themeParent(&:first-child);
}
这可能吗? 为什么我正在做的使SCSS不开心的事情:-(
答案 0 :(得分:1)
您只需要将参数放在字符串中即可。
@mixin themeParent($child) {
&--blue #{$child} {
color: blue;
}
}
.cool {
@include themeParent('a:hover');
@include themeParent('&:first-child');
}