SCSS 插值无法为宽度分配百分比
Posted
技术标签:
【中文标题】SCSS 插值无法为宽度分配百分比【英文标题】:SCSS Interpolation Fails for Assigning a Percentage to Width 【发布时间】: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%;
----------------------^
它看起来不像我预期的那样解释这个。我想在百分号之前插入数值。但我认为它是将它们读取为字符串,然后尝试评估百分比并感到困惑。
【问题讨论】:
【参考方案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);
【讨论】:
以上是关于SCSS 插值无法为宽度分配百分比的主要内容,如果未能解决你的问题,请参考以下文章
scss 将像素轻松转换为百分比。 #sass__calculators