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会将该行解释为变量赋值.