用SCSS / SASS计算百分比


121

我想通过计算以百分比形式在scss中设置宽度,但这给了我错误。

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

我想做类似的事情

$my_width: (4/12)%;

div{
width: $my_width;
}

如何在其中添加%号?

px和em同样的问题


1
没有什么可摆弄的。我只想将数字的单位添加到计算中。与(400/20)px相同。如何在scss中显示数字和px / em /%?这样,我可以拥有“全局变量”,我可以更改一次
Nick Ginanto

尝试添加一个括号,如$ my_width:((4/12)%);
斯里兰卡

抱歉,我没有机会进行检查并尝试做一次。.{$ my_width:(4/12)%;}
斯里兰卡

Answers:


211

您是否尝试过百分比功能?

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

1
px和em有类似的功能吗?
尼克·吉南托

1
不确定,但是在文档的源代码部分中,您可以看到基本的逻辑:Sass :: Script :: Number.new(value.value * 100,['%']),所以我认为如果他们不这样做存在时,您可以直接执行此操作,也可以自己创建一些包装函数。
Tomas 2012年

4
@NickGinanto for px,您可以将其添加+px到行的末尾,例如width: ($foo + $bar) +px
DisgruntledGoat

2
@DisgruntledGoat不,在任何情况下都不要这样做。添加单位应通过乘法(例如$foo + $bar * 1px)完成,将单位串联起来,这样只会给您一个字符串。
cimmanon

@cimmanon最近是否有所改变?我敢肯定,当我发表评论时并非如此。
不满的山羊

30

其他方式:

$my_width: 4/12*100%;

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

Sass将输出以%为单位的值。


13
请注意,我必须使用100/6 * 1%才能为我完成此工作,否则我最终得到1666.67%。
sp00n 2015年

我在哪里可以找到文档?* 100%实际上是什么?
燕丽

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.