如何使用 mixin 保持模块化？答案

【问题标题】：How do I maintain modularity with mixins?如何使用 mixin 保持模块化？
【发布时间】：2014-04-14 19:32:22
【问题描述】：

我正在为我的团队创建一个 SASS 混合库，以便在他们选择的 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 做一些事情来“对抗”这种继承，但我对命名空间混合样式的整体技术更感兴趣（如果可能的话）。

【问题讨论】：

标签： html css sass mixins

【解决方案1】：

在这个问题上工作了一段时间（早在发布这个问题之前），我将发布我自己的管理解决方法，如果不是一个完整的解决方案：

在您的样式指南中强制禁止选择裸元素（例如“div {...}”。用户需要这样做：

SASS

@mixin button()
  color: red

@mixin link()
  color: blue

.btn
  @include button()

ul.nav > li > a.nav-link
  @include link()

不幸的是，这为 HTML 添加了更多类。

更新

我开始讨厌上面的方法。各地的直接后代选择器紧密耦合元素的接近度。

我认为解决这个问题的最简洁的方法是避免元素（而不是块）的内容描述类。

毕竟，像导航栏和模态框这样的块可以意味着各种各样的东西，但是你还需要什么其他类来描述一个按钮呢？也许按钮上的 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.

【讨论】：