使用 SCSS/SASS 计算百分比答案

【问题标题】：Calculate a percent with SCSS/SASS使用 SCSS/SASS 计算百分比
【发布时间】：2012-11-01 19:17:25
【问题描述】：

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

“...-width: (4/12)%”后的 CSS 无效：预期表达式（例如 1px，粗体），是“;”

我想做类似的事情

$my_width: (4/12)%;

div{
width: $my_width;
}

如何在其中添加 % 符号？

px 和 em 的问题

【问题讨论】：

没什么可摆弄的。我只想将数字的单位添加到计算中。与 (400/20) 像素相同。我如何在 scss 中有一个数字和 px/em/%？这样我就可以拥有“全局变量”，我可以更改一次
尝试添加一个括号，如 $my_width: ((4/12)%);
哎呀..对不起，我没有机会检查它并再试一次.. {$my_width: (4/12)%;}

标签： css sass

【解决方案1】：

你试过percentage函数吗？

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

【讨论】：

px和em有类似的功能吗？
不确定，但是在文档的源代码部分可以看到底层逻辑：Sass::Script::Number.new(value.value * 100, ['%'])，所以我认为如果它们不存在，您可以直接执行此操作，或者自己创建一些包装函数。
@NickGinanto for px 你可以在行尾添加+px，例如width: ($foo + $bar) +px
@DisgruntledGoat 不，在任何情况下您都应该永远这样做。添加单位应该通过乘法来完成（例如$foo + $bar * 1px），像这样连接单位只会给你一个字符串。
@cimmanon 最近有变化吗？我确定我发表评论时并非如此。

【解决方案2】：

另一种方式：

$my_width: 4/12*100%;

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

Sass 将以 % 为单位输出值。

【讨论】：

【解决方案3】：

我能够让它这样工作：

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

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

【讨论】：