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

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;
}