使用 SCSS/SASS 计算百分比

我想设置一个宽度的百分比在通过计算，但它给我的错误..。

在“ ...-width: (4/12)%”: 预期表达式(例如1px, 粗体) ，是“ ;”

我想做一些像

$my_width: (4/12)%;


div{
width: $my_width;
}

如何在这里添加% 符号？

对于 px 和 em 也是同样的问题

106987 次浏览

小开

最佳答案

你试过百分比功能吗？

$my_width: percentage(4/12);
div{
width: $my_width;
}

这个函数从1.33.0版本开始就更新了，现在这是一个正确的方法:

@use "sass:math";


div {
width: math.percentage(math.div(4,12));
}

小开

另一种方式:

$my_width: 4/12 * 100%;


div {
width: $my_width; // 33.33333%
}

Sass 将输出% 中的值。

小开

我可以这样做:

div{
width: (4/12)* 1%;
}

这样你就不需要使用任何特殊的功能。

小开

如果你想使用一个循环，也许这个解决方案将工作

@for $i from 1 through 12 {
.col-#{$i} {
width: #{calc(100 * $i / 12) + '%'};
}
}