sass - SCSS插值无法分配宽度百分比

Question

我正在生成具有在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}%;
   ----------------------^

看来它并没有按照我的预期来解释。我想在百分号前插入数字值。但是我认为它是将它们读取为字符串，然后尝试评估百分比并感到困惑。

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