css - SASS Mixin 用一个参数代替另一个参数

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

显然它是用第二个参数代替第一个参数。它在这里产生与我的服务器上相同的输出。我希望有人能解释为什么会这样。

Answer 1

请注意，不仅 的值$style被替换为 的值$value，而且您也没有得到不带前缀的规则 - 您应该transform: rotate(90deg);在之前拥有第一个输出规则o-transform。这应该是问题出在第一行的线索。

它是：第一行应该是

#{$style}: $value;

就像在所有后续规则中一样，$style要打印要打印的文字内容，您必须使用井号装饰器。没有它，SASS 将该行解释为变量赋值。