SASS Mixin 用一个参数代替另一个参数答案

【问题标题】：SASS Mixin Substituting One Argument for AnotherSASS Mixin 用一个参数代替另一个参数
【发布时间】：2012-10-26 01:13:45
【问题描述】：

所以，我刚开始学习 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。我希望有人能解释为什么会这样。

【问题讨论】：

标签： css sass

【解决方案1】：

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

它是：第一行应该是

#{$style}: $value;

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

【讨论】：