Question

编译css

.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg); }

SCSS

$fa-css-prefix : 'fa';
@mixin fa-icon-rotate($degrees, $rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}

.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }

为什么我得到了意外的结果filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);

任何人都可以指出这个scss中的错误。

Answer 1

正如我之前在评论中提到的，对于这种情况，我们需要使用类似下面代码块的插值来获取打印的$rotation变量的值。 interpolation的语法是#{$var}。插值是必需的，因为变量的值需要放在另一个字符串中，然后整个事物需要被指定为属性的值。

$fa-css-prefix : 'fa';
@mixin fa-icon-rotate($degrees, $rotation) {
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}

.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }

为什么scss中的$ rotation变量不在filter中解析：progid：DXImageTransform.Microsoft.BasicImage

1 个答案: