SASS中使用%指定动态网格宽度的语法问题

嘿，我明白你想实现根据网格数量自动生成对应宽度类的需求，你当前的代码问题出在百分比符号的写法不符合SASS的语法规则，咱们来修正一下：

问题根源 #

你写的(100/#{$grids})%;是错误的，SASS里不能把%直接放在表达式外面，也不需要额外的分号在表达式里，正确的做法是把计算结果和百分比符号正确结合。

解决方案1：使用SASS内置的percentage()函数（推荐） #

这个函数可以直接把小数转换成百分比格式，代码更简洁规范：

$grid-elements: 1 2 3 4 5 6;
@each $grids in $grid-elements {
  .display-grids-#{$grids} {
    width: percentage(1/$grids);
  }
}

解释：1/$grids会得到比如1/2=0.5，percentage(0.5)就会输出50%，完美符合你的需求。

解决方案2：手动插值拼接百分比 #

如果你不想用内置函数，也可以手动把计算结果和%拼接，注意要把整个计算逻辑放在插值#{}里：

$grid-elements: 1 2 3 4 5 6;
@each $grids in $grid-elements {
  .display-grids-#{$grids} {
    width: #{100/$grids}%;
  }
}

这样100/$grids计算出数值后，会和%拼接成正确的百分比字符串。

验证效果 #

两种方法编译后，都会生成你想要的CSS：

.display-grids-2 {
  width: 50%;
}

其他网格数量的类也会对应生成正确的宽度，比如.display-grids-3会是33.33333%，.display-grids-4是25%等等。

内容的提问来源于stack exchange，提问作者Yogesh