Question

我正在为我的团队创建一个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样式的整体技术（如果可能的话）。

Answer 1

已经处理了一段时间（在发布此问题之前很久），我将发布自己的管理解决方案，如果不是完整的解决方案：

在你的风格指南中强制选择裸元素选择（例如＆＃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.

如何使用mixins保持模块化？

1 个答案: