5

我有一个可以绘制这样一个按钮的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？

4

4 回答 4

8

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;
}
于 2013-08-22T18:39:18.890 回答
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 不受影响，并且您仍将拥有您想要的功能。

于 2013-08-23T07:57:10.780 回答
3

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

这是一个例子：

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

于 2013-08-20T17:51:04.473 回答
1

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

:is()

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

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

于 2021-08-27T14:54:12.753 回答