很抱歉这个问题的语言很奇怪,但我不知道如何更好地描述它。我希望这个例子能清楚地说明我想要什么:
scss 语法
.my-smug-selector {
@include my-smug-mixin(30px);
}
所需的 css 输出
.my-smug-selector{
// some styles
}
.another-smug-selector-on-base-lvl{
// some other styles
}
.smug-non-nested-selector{
// some other styles
}
总的来说,我对此很感兴趣,但为了解释我为什么要这样做:我想定义一个关键帧动画,它被指定的选择器使用,例如:
scss 语法
.my-smug-selector {
@include my-smug-mixin($vars);
}
所需的 css 输出
.my-smug-selector{
animation: most-smugish-animation 5s;
}
@keyframes most-smugish-animation {
from {background:red;}
to {background:yellow;}
}
最佳答案
使用 Sass 3.3(目前仍在开发中),你可以这样写:
@mixin smugmation() {
animation: most-smugish-animation 5s;
@at-root {
@keyframes most-smugish-animation {
from {background:red;}
to {background:yellow;}
}
}
}
.my-smug-selector {
@include smugmation;
}
否则,您必须将选择器的名称作为参数传递给混入:
@mixin smugmation($sel) {
#{$sel} {
animation: most-smugish-animation 5s;
}
@keyframes most-smugish-animation {
from {background:red;}
to {background:yellow;}
}
}
@include smugmation('.my-smug-selector');
关于css - 如何使 Sass mixin 在基层声明非嵌套选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21270492/