Question

所以，我刚刚开始学习SASS，我想我会写一个快速的mixin来将所有供应商前缀添加到一个语句中。所以我写了这个：

@mixin prefix( $style, $value ) {
  $style: $value;
  -o-#{$style}: $value;
  -moz-#{$style}: $value;
  -webkit-#{$style}: $value;
  -ms-#{$style}: $value;
}

header {
  @include prefix( transform, rotate(90deg) );
}

然而，由于某些原因我无法理解，这会产生输出：

header {
  -o-rotate(90deg): rotate(90deg);
  -moz-rotate(90deg): rotate(90deg);
  -webkit-rotate(90deg): rotate(90deg);
  -ms-rotate(90deg): rotate(90deg); }

显然，它将第二个参数替换为第一个参数。它产生与我的服务器上相同的输出here。我希望有人可以解释为什么会发生这种情况。

Answer 1

请注意，不仅$style的值已替换为$value的值，而且您还没有获得非加前缀的规则 - 您应该transform: rotate(90deg);为o-transform #{$style}: $value;之前的第一个输出规则。这应该是问题出在第一行的线索。

它是：第一行应该是

$style

就像所有后续规则一样，为了打印{{1}}的文字内容，你必须使用井号装饰器。没有它，SASS会将该行解释为变量赋值。

SASS Mixin将一个论点替换为另一个

1 个答案: