如何使用mixins保持模块化?

时间:2014-04-14 19:32:23

标签: html css sass mixins

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

1 个答案:

答案 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.