3

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

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

3 回答 3

3

当您不总是希望将相同的值应用于选择器时，您可以使用 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在一个地方删除，而不是搜索所有文件并从多个地方删除它。

于 2013-01-29T09:17:32.730 回答
1

使用 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) 类应该有语义。Mixin 应该更像代码片段，能够在许多不同的地方使用。

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

于 2013-01-29T09:26:07.613 回答
0

作为 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）

于 2013-01-29T09:19:57.427 回答