SCSS插值失败的分配的百分比，以宽度

Question

我产生一些列班，在萨斯地图定义，像这样的宽度：

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