我为什么要使用SASS mixin？

我知道我可以使用mixin来扩展带有一些常用样式的sass类。 另一方面，我可以用一个类来完成它，并为相关的html元素设置它

• 那我为什么要用它呢
• 您建议在哪些情况下使用它
• 它有什么优势吗
• 它是否被视为一种标准

  ---

当您并不总是希望将相同的值应用于选择器时，可以使用mixin

例如，如果您想要制作圆角的东西，您可以创建一个接受“半径”参数的mixin：

=borderRadius($value)
  border-radius: $value
  -webkit-border-radius: $value
  -moz-border-radius: $value
  -o-border-radius: $value

然后你可以在其他地方做：

.selector1
  +borderRadius(5px)

.selector2
  +borderRadius(10px)

---

这基本上是干的。Ti使代码更易于维护，例如，一旦您不需要支持Opera，您只需在一个位置删除

-o-border-radius

，而不是搜索所有文件并从多个位置删除它。

作为mixin的示例；假设您有一个固定网格中带有图标的精灵。每个图标都是32x32px，您希望基于该精灵为32x32px和16x16px生成图标。这就是mixin非常方便的地方

@mixin icon($name, $left, $top)
{
  &.#{$name}-16:not(.raw)
  {
    &:before
    {
        float: left;
        content: "";
        width: 16px;
        height: 16px;
        margin-right: 8px;

        background-size: 300px 300px;
        background-image: image_url('icons/sprite_gray.png');
        background-position: -#{$left * 16}px -#{$top * 16}px;
    }

    &:hover:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 1}px; }
    &.active:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 2}px; }
    &.active.contrast:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 3}px; }
  }

  &.#{$name}-16.raw
  {
    width: 16px;
    height: 16px;

    background-size: 300px 300px;
    background-image: image_url('icons/sprite_gray.png');
    background-position: -#{$left * 16}px -#{$top * 16}px;
  }

  &.#{$name}-32:not(.raw)
  {
    &:before
    {
        content: "";
        width: 32px;
        height: 32px;

        background-size: 600px 600px;
        background-image: image_url('icons/sprite_gray.png');
        background-position: -#{$left * 32}px -#{$top * 32}px;
    }

    &:hover:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 1}px; }
    &.active:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 2}px; }
    &.active.contrast:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 3}px; }
  }

  &.#{$name}-32.raw
  {
    display: inline-block;
    width: 32px;
    height: 32px;

    background-size: 600px 600px;
    background-image: image_url('icons/sprite_gray.png');
    background-position: -#{$left * 32}px -#{$top * 32}px;
  }

}

因此，通过这个mixin，我可以给出图标的名称和位置来创建样式，如：

.icon { 
    @include icon(user, 1, 1);
    @include icon(role, 5, 1);
}

这给了我

user-16、user-32、role-16、role-32类来实现图标

（在本例中，它们被附加为
：在
内容之前，除非您使用
.raw
）
使用mixin有几个优点：

1） 要使用一个类，实际上必须用这样的类标记所有html元素（=创建不必要的开销），mixin可以是现有类的扩展，也可以在必要时创建其他类

2） mixin可以获取参数，使其具有高度的动态性和可恢复性。在需要几个类的地方，只需要一个参数化的mixin。（波德拉迪、颜色、透明度、恒流大小等）：

*来自Sass文档的示例

3） 类应该有语义。mixin应该更像代码片段，能够在许多不同的地方使用

我上面提到的所有这些观点的一个很好且更复杂的例子是pduersteler的mixin。
FWIW我认为这是一个有用的问题类型，可以询问并获得不同的观点。我曾经问过一个类似的问题（），非常感谢我得到的深思熟虑的答案我来这里是想了解“为什么要使用SASS”。。。
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}