使用SCSS/SASS计算百分比

Question

我想通过计算在scss中设置百分比的宽度，但是它给了我错误信息..

无效的CSS代码："...-width: (4/12)%", 期望表达式（例如1px， bold），却出现 ";"

我想做类似于：

$my_width: (4/12)%;

div{
width: $my_width;
}

如何在其中添加百分号（%）？

同样的问题也适用于px和em。

- Nick Ginanto

---

没有什么需要调整的。我只想将数字的单位添加到计算中。就像（400/20）px一样。在scss中，我该如何使用数字和px/em/%？这样我就可以拥有“全局变量”，可以一次性更改它们。 - Nick Ginanto

尝试添加一个括号，例如$my_width: ((4/12)%); - Sri

抱歉，我没有机会检查它并再试一次来完成这个任务。{$my_width：（4/12）％;} - Sri

Answer 1

您尝试过 percentage 函数吗？

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

---

更新

自版本1.33.0以来，此功能已进行了更新，现在这是正确的方法：

@use "sass:math";

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

来源: https://sass-lang.com/documentation/modules/math#percentage

意思是该链接指向Sass官方文档中与百分比相关的模块。

- Tomas

---

px和em有类似的函数吗？ - Nick Ginanto

不确定，但在文档的源代码部分您可以看到底层逻辑：Sass::Script::Number.new(value.value * 100, ['%'])，所以我认为如果它们不存在，您可以直接这样做，或者自己创建一些包装函数。 - Tomas

对于像px这样的单位，您只需在代码行末尾添加“ +px”，例如width: ($foo + $bar) +px。 - DisgruntledGoat

@DisgruntledGoat 不，无论在任何情况下都不应该这样做。添加单位应该通过乘法来完成（例如 $foo + $bar * 1px），像那样连接单位只会给你一个字符串。 - cimmanon

@cimmanon 最近有改变吗？我确定在我发表评论时不是这种情况。 - DisgruntledGoat

据我所知，这从来没有发生过。 - cimmanon

Answer 2

另一种方法：

$my_width: 4/12 * 100%;

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

Sass会以百分比的形式输出此值。

- rlejnieks

---

注意，为了让这个方法对我起作用，我不得不使用100 / 6 * 1％，否则我会得到1666.67％的结果。 - sp00n

我在哪里可以找到关于 * 100% 的文档说明？ - Ini

Answer 3

我能够这样使其工作：

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

这种方法不需要使用任何特殊函数。

- Enrique Cuchetti

Answer 4

如果您想使用循环，也许这个解决方案会起作用。

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

- Rashad Yusifov