Question

我正处于一个项目的早期阶段，随着它的发展，它会积累大量的风格。我们正在讨论用于干燥我们的样式代码的CSS预处理器mixin模式的优点。当mixin参数化时，好处相当明显 - 几乎每个实例都必须手写，因此代码膨胀相对较少，特别是如果没有经常使用特定的参数化。

然而，对于未参数化的混音，它有点模糊。以clearfixing为例。

在纯CSS中，我们可能会创建一个cf类，然后在必要时在标记中调用它。这很好用，但是用纯粹的表示类来填充标记。

在SASS中，我们可以通过使用mixin来解决这个问题：

//in _mixins.scss
@mixin clear-fix() {
  &:before, &:after {
    content: '\0020';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    width: 0;
    height: 0;
  }
}

//in my_component.scss
@import 'mixins';

.my_component {
  // styles ...
  @include clear-fix() 
}

这有利于集中纯粹的表达问题并使我们的样式代码更易于维护。但缺点是编译后的CSS将非常简单，并且在它混入的每个块中逐字逐句地重复使用（将其应用于我们以相同方式使用的任何类似的CSS模式）。

我的问题是混合代码的重复是否可能导致任何重大问题？或者是否有另一种我没想到的解决方案？

Answer 1

我认为你给出的例子的主要缺点是你在使用clearfix的所有地方重复...所以在你的例子中，如果你有100个使用clear-fix类的元素，那么你d有693个不需要的额外CSS行。

两个建议：

我只会在使用参数时使用mixins，而CSS属性实际上会改变值。使用“void”mixins似乎效率低下，因为你可以使用普通的旧CSS。
在这里查看stubbornella的面向对象的CSS：https://github.com/stubbornella/oocss/wiki。如果你将clear-fix mixin抽象为一个可重复使用的CSS对象，你会更加干涩（尽管你仍然会重复一点）

Answer 2

您的另一个选择是使用extend。这将是DRYer方法，而不是一直重复使用mixin，因为逗号分隔选择器而不是复制样式。

示例

.bacon { color: red; } .smokey { @extend .bacon; } // Outputs .bacon, .smokey { color: red; }

http://css-tricks.com/the-extend-concept/

CSS预处理器mixins与标记类

2 个答案: