Css 用一个参数替换另一个参数

所以，我刚刚开始学习SASS，我想我应该写一个快速混合语句，将所有供应商前缀预先添加到语句中。所以我写了这个：

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

---

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

请注意，

$style

的值不仅已被

$value

的值替换，而且您还没有得到无前缀规则-您应该有

变换：旋转（90度）

作为

o-transform

之前的第一个输出规则。这应该是问题出在你的第一行的线索

它是：第一行应该是

{$style}:$value

就像在所有后续规则中一样，要打印
$style
的文字内容，必须使用磅符号装饰符。如果没有它，SASS将该行解释为变量赋值。
请注意，不仅将
$style
的值替换为
$value
的值，而且您也不会得到无前缀规则-您应该有
变换：旋转（90度）
作为
o-transform
之前的第一个输出规则。这应该是问题出在你的第一行的线索

它是：第一行应该是

{$style}:$value

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