使用SASS应用多种样式

Question

我需要将两种样式应用于使用SASS的元素：

.one {
 max-width: 960px;
 margin: auto;
}
.two {
 max-width: 960px;
 margin: auto;
}
.three {
 max-width: 960px;
 margin: auto;
}

如何在DRY方法中执行此操作？我无法从纪录片中看到。

变量似乎只传递一条规则。 Mixins通过多个但我不需要变量 http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Answer 1

这不仅仅是一个例子： -

.one,
.two,
.three {
 max-width: 960px;
 margin: auto;
}

或者，更好： -

.thing {
 max-width: 960px;
 margin: auto;
}

并在需要的地方应用“东西”。这似乎并不需要Sass特定的解决方案。除非你想将后一个例子扩展为： -

.one { @extend .thing; }

等等。

Answer 2

与@drmonkeyninja类似，除了我会使用占位符（％）而不是类，特别是如果该类不会在网站上使用。否则，生成的CSS将包含一个冗余类：

.thing,
.one,
.two,
.three {
  max-width: 960px;
  margin: auto;
}

相反，你可以这样做：

%thing {
  max-width: 960px;
  margin: auto;
}

.one,
.two,
.three {
  @extend %thing;
}

这将导致以下CSS，其中仅包含您的网站将使用的类：

.one,
.two,
.three {
  max-width: 960px;
  margin: auto;
}