Question

我创建了一个Sass mixin和一个具有相同样式的CSS类，因此开发人员可以选择将类添加到HTML中，或者将mixin应用于Sass。

@mixin link-style-1 {
    background: $red;
    padding:  .75em 45px .75em 5%;
}
.link-style-1 {
    background: $red;
    padding:  .75em 45px .75em 5%;
}

有没有办法将这2个组合成1？知道我可以使用一个变量来填充两者，但是后来我的代码会变得更长，更难读。有更清洁的解决方案吗？

Answer 1

你可以在课堂上加入mixin for drYness：

@mixin link-style-1 {
    background: $red;
    padding:  .75em 45px .75em 5%;
}
.link-style-1 {
    @include link-style-1;
}

Answer 2

没有真正的理由成为混合物。您可以使用占位符选择器并为该类扩展它。

%link-style-1 {
    background: $red;
    padding:  .75em 45px .75em 5%;
}
.link-style-1 {
    @extend %link-style-1;
}

执行此操作时，占位符（＆＃34;静默类＆＃34;）不会输出到CSS，就像mixin一样;但是，扩展它的每个选择器将被组合，而不是像mixin那样引起代码重复。

结合Sass mixin和CSS类？

2 个答案: