SCSS 插值无法为宽度分配百分比答案

【问题标题】：SCSS Interpolation Fails for Assigning a Percentage to WidthSCSS 插值无法为宽度分配百分比
【发布时间】：2017-04-30 08:10:17
【问题描述】：

我正在生成几个列类，其宽度在 Sass 映射中定义，如下所示：

$column-widths: 5 10 20 25 30 33 40 50 60 66 70 80 90 100;

@each $width in $column-widths {
  .column-#{$width} {
    width: #{$width}%;
  }
}

但是，我在编译时收到此错误：

Error in plugin 'sass'
Message:
    grid.scss
Error: Invalid CSS after "...dth: #{$width}%": expected expression (e.g. 1px, bold), was ";"
        on line 10 of grid.scss
>>       width: #{$width}%;
   ----------------------^

它看起来不像我预期的那样解释这个。我想在百分号之前插入数值。但我认为它是将它们读取为字符串，然后尝试评估百分比并感到困惑。

【问题讨论】：

标签： sass gulp-sass

【解决方案1】：

想出了正确的方法来做到这一点。我应该使用 Sass 中的百分比函数，而不是插值。

$column-widths: 5 10 20 25 30 33 40 50 60 66 70 80 90 100;

@each $width in $column-widths {
  .column-#{$width} {
    width: percentage($width / 100);
  }
}

【讨论】：