【问题标题】：Is it possible to test for the current element type from within a SASS mixin?是否可以从 SASS mixin 中测试当前元素类型？
【发布时间】：2013-08-17 13:59:46
【问题描述】：

我有一个可以像这样绘制按钮的 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 中包含一个条件来检查我是否在设置 a 标签的样式，或者我是否需要编写第二个 mixin？

【问题讨论】：

stackoverflow.com/a/9488849/465082 您可以在@mixin 块内使用条件并调用@include button('link') 或@include button(tag`)
您能准确解释一下您的代码有什么问题吗？
我已更新问题以使其更清晰。 a 标签需要额外的样式才能像按钮标签一样呈现。
嗨 Kashyap，这是一个很好的解决方案，但我宁愿不必传递值，我宁愿它可以只检查当前上下文。

标签： sass

【解决方案1】：

有一个更新的解决方案甚至可以在 SASS 之外的其他系统中运行：

`:is()`

&:is(a[href]) {
  // only links
}

https://caniuse.com/css-matches-pseudo

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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 不受影响，并且您仍将拥有您想要的功能。

【讨论】：

这里没有真正的理由使用@content，因为只有一个选择器在使用。你也可以输入a.my_button { @include button; padding-top: 10px 10px 0 10px; }
视情况而定。我喜欢 @content 指令，因为它使您能够保持 mixin 不变并且仍然覆盖它的一些样式。语法看起来也不错。
虽然它适用于相同的编译 CSS，但在这种情况下 @content 没有任何好处。这就是我要在这里提出的观点。 @content 指令仅在您在 mixin 中生成选择器的情况下才有用。否则，你可能根本不使用它并在你的 mixin 调用之后定义额外的样式。

【解决方案4】：

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

这是一个例子：

@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。

【讨论】：

太好了，谢谢凯蒂。看起来目前不可能。