Sass 算法 [英] Sass Arithmetic
问题描述
我正在尝试从 1 到 12 循环,并为应用程序中特定视图的更改网格输出一些跨度宽度.
I'm trying to loop from 1 to 12 and output some span widths for an altered grid for a particular view in an app.
$span-width: 8.21875%;
$gap: 0.125%;
@for $i from 1 through 12 {
$span-width: ($i * $span-width) + ($i * $gap) ;
.span#{$i}{
width: $span-width;
}
}
这是输出
.span6 {
width: 6162%;
}
如何使用通常的算术规则编写 sass 来计算宽度?
How do I write the sass to calculate the widths using the usual arithmetic rules?
推荐答案
你想要的表达式是这样的:($i * ($span-width/1%)) + ($i * ($gap/1%))
.或者,您可以从 $span-width
/$gap
变量中删除 %.
The expression you want is this: ($i * ($span-width / 1%)) + ($i * ($gap / 1%))
. Alternately, you could drop the % from your $span-width
/$gap
variables.
不确定为什么将变量分配给表达式不起作用(我只使用@debug 对其进行了测试)
not sure why assigning the variable to the expression isn't working (I had only tested it using @debug)
$span-width: 8.21875%;
$gap: 0.125%;
@for $i from 1 through 12 {
@debug (($i * ($span-width / 1%)) + ($i * ($gap / 1%))) * 1%;
.span#{$i}{
width: (($i * ($span-width / 1%)) + ($i * ($gap / 1%))) * 1%;
}
}
生成这个:
.span1{width:8.34375%}
.span2{width:16.6875%}
.span3{width:25.03125%}
.span4{width:33.375%}
.span5{width:41.71875%}
.span6{width:50.0625%}
.span7{width:58.40625%}
.span8{width:66.75%}
.span9{width:75.09375%}
.span10{width:83.4375%}
.span11{width:91.78125%}
.span12{width:100.125%}
如果您确实需要重用该变量,您可能需要考虑为其创建一个函数.
If you really need to reuse the variable, you might want to consider making a function for it.
这篇关于Sass 算法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!