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

我有一个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？

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

下面是一个例子：

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

看看它在行动

看起来这个功能是（可能）为Sass 3.3计划的，在根目录下有

@指令：。
Sass 3.3和更早版本
在mixin中，没有。如果你对extends开放，你可以非常接近：

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

为什么不使用@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未被触动，并且您仍将拥有所需的功能。
您可以在
@mixin
块中使用条件，并调用
@include按钮（'link'）
或
@include按钮（
标记`）你能解释一下你的代码到底出了什么问题吗？我已经更新了这个问题，让它更清楚。a标记需要额外的样式才能像按钮标记一样呈现。Kashyap，这是一个很好的解决方案，但我不希望传递值，我希望它只检查当前上下文。太好了，谢谢Katie。看起来目前不可能。这里没有真正的理由使用
@content
，因为只有一个选择器在使用。你最好键入
a.my_按钮{@include按钮；padding top:10px 10px 0 10px；}
这要看情况而定。我喜欢@content指令，因为它使您能够保持mixin不变，并且仍然覆盖它的一些样式。语法看起来也不错。虽然它适用于相同的编译CSS，但在本例中，
@content
没有任何好处。这就是我想说的重点。
@content
指令仅在mixin中生成选择器的情况下有用。否则，您可能根本不使用它，而是在mixin调用之后定义额外的样式。