Question

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

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

Answer 1

如果您不总是希望将相同的值应用于选择器，则使用mixin。

例如，如果你想制作圆角的东西，你会创建一个接受“radius”参数的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，而不是搜索所有文件并将其从多个位置删除。

Answer 2

使用mixins有几个优点：

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

2）Mixins可以获取参数，使其具有高度动态性和可重复性。您只需要一个参数化的mixin，您需要几个类。（boderradii，颜色，透明度，字体等）：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

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

^{*来自Sass-Doc的例子}

3）类应具有语义含义。 Mixins应该更像codenippets，能够在许多不同的地方使用。

上面提到的所有这些要点的一个好的，更复杂的例子是pduersteler的mixin。

Answer 3

作为mixins的一个例子;假设你有一个带有固定网格图标的精灵。图标分别为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个类来实现图标。

（在此示例中，除非您使用:before

，否则它们将作为.raw内容附加

我为什么要使用SASS mixin？

3 个答案: