我正在为我的团队创建一个SASS mixin库,以便在他们选择的CSS类中使用。我意识到防止风格污染比我想象的要困难。
如果没有预处理器,我很容易将这两种样式分开
.button { color: red; }
.link { color: blue; }
现在,我想为每种风格创建mixins
@mixin button()
color: red
@mixin link()
color: blue
看起来很简单,但我无法控制如何将mixin分配给类。用户可以选择这样做:
SASS
.btn
@include button()
ul.nav > li > a
@include link()
HTML
<ul class="nav">
<li>
<a href="">Home</a>
</li>
<li>
<a class="btn" href="">Save</a>
</li>
</ul>
现在按钮继承了链接样式。当然,我可以用CSS做一些事情来“对抗”这种继承,但我更感兴趣的是在命名空间mixin样式的整体技术(如果可能的话)。
答案 0 :(得分:0)
已经处理了一段时间(在发布此问题之前很久),我将发布自己的管理解决方案,如果不是完整的解决方案:
在你的风格指南中强制选择裸元素选择(例如&#34; div {...}
)。用户需要这样做:
SASS
@mixin button()
color: red
@mixin link()
color: blue
.btn
@include button()
ul.nav > li > a.nav-link
@include link()
不幸的是,这会为HTML添加更多类。
<强>更新强>
我开始讨厌上面的方法。遍布整个地方的直接后代选择器紧密地耦合了元素的接近度。
我能想到解决这个问题的最简单方法是避免元素的内容描述类(而不是块)。
毕竟,像navbars和modals这样的块可能意味着各种各样的东西,但是你需要用什么类来描述一个按钮呢?也许按钮上的mixins应该延迟到按钮上的修饰符。
.button
// This has already been defined by the underlying framework.
.button.send-form
@include button-primary()
// This is a special button so we'll move in the primary color and a drop shadow.