Sass 算术

Question

我正在尝试从 1 循环到 12，并为应用中特定 View 的更改网格输出一些跨度宽度。

$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 以使用通常的算术规则计算宽度？

Answer 1

你想要的表达式是这样的:($i * ($span-width/1%)) + ($i * ($gap/1%))。或者，您可以从 $span-width/$gap 变量中删除 %。

编辑:不确定为什么将变量分配给表达式不起作用(我只使用@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%}

如果你真的需要重用这个变量，你可能要考虑为它创建一个函数。