css - 为什么 scss 中的 $rotation 变量不在过滤器 : progid:DXImageTransform. Microsoft.BasicImage 中解析

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