Sass 3.3及以上

Question

我有一个mixin，它画了一个这样的按钮：

@mixin button {
  border: 1px solid $orange;
  background: $orange;
  padding:0;
  height:27px;
  text-transform: uppercase;
  color:white;
  display:block;
  // if I'm styling an a tag padding-top:10px 10px 0 10px;
}

我希望能够做到这一点：

button.my_button {
  @include button;
}

a.my_button {
  @include button;
}

第二个需要一些额外的自定义代码才能很好地工作。是否可以在mixin中包含一个条件，检查我是否正在构建一个标签，或者我是否需要写第二个mixin？

Answer 1

Sass 3.3及以上

在mixin中，没有。如果你愿意延伸，你可以非常接近：

$orange: lighten(orange, 10%);

%button {
  border: 1px solid $orange;
  background: $orange;
  padding:0;
  height:27px;
  text-transform: uppercase;
  color:white;
  display:block;
}

a%button {
    padding-top:10px 10px 0 10px;
}

button.my_button {
  @extend %button;
}

a.my_button {
  @extend %button;
}

编译为：

button.my_button, a.my_button {
  border: 1px solid #ffb733;
  background: #ffb733;
  padding: 0;
  height: 27px;
  text-transform: uppercase;
  color: white;
  display: block;
}

a.my_button {
  padding-top: 10px 10px 0 10px;
}

Sass 3.4及更新

从3.4开始，我们可以检查和操作选择器。

$orange: lighten(orange, 10%);

@mixin button {
  border: 1px solid $orange;
  background: $orange;
  padding:0;
  height:27px;
  text-transform: uppercase;
  color:white;
  display:block;

  @if is-superselector('a', &) {
    padding-top: 10px 10px 0 10px;
  }
}

button {
  @include button;
}

b a.foo {
  @include button;
}

输出：

button {
  border: 1px solid #ffb733;
  background: #ffb733;
  padding: 0;
  height: 27px;
  text-transform: uppercase;
  color: white;
  display: block;
}

b a.foo {
  border: 1px solid #ffb733;
  background: #ffb733;
  padding: 0;
  height: 27px;
  text-transform: uppercase;
  color: white;
  display: block;
  padding-top: 10px 10px 0 10px;
}

Answer 2

在撰写本文时，无法检查条件中的上下文/元素类型。但您可以在条件中设置默认值，从而简化混合的默认情况。

以下是一个例子：

@mixin button($type: normal) { 

  border: 1px solid orange; background: orange; color: white; display: block;

    @if $type == anchor { padding: 10px 10px 0 10px; } 
    @else { padding: 0; }

}

button.my_button {
  @include button;
}

a.my_button {
  @include button($type: anchor);
}

在http://sassmeister.com/gist/6284603见到它。

看起来这个功能（可能）是针对Sass 3.3计划的@at-root指令：https://github.com/nex3/sass/issues/774。

Answer 3

为什么不使用 @content 指令。

$orange: #000;
@mixin button {
    border: 1px solid $orange;
    background: $orange;
    padding: 0;
    height: 27px;
    text-transform: uppercase;
    color: white;
    display: block;
    @content;
}
button.my_button {
    @include button;
}

a.my_button {
    @include button {
       padding-top:10px 10px 0 10px;
    };
}

使用这种方法，您将保持mixin不变，您仍然可以拥有所需的功能。

是否可以在SASS mixin中测试当前元素类型？

3 个答案:

Sass 3.3及以上

Sass 3.4及更新