Sass算法

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

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

您需要的表达式是：

（$I*（$span-width/1%）+（$I*（$gap/1%））

。或者，您可以从

$span WITH

/

$gap

变量中删除%

编辑：不确定为什么将变量分配给表达式不起作用（我只使用@debug对其进行了测试）

生成以下内容：

.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%}

---

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

所以我已经用小数解决了它，并使用百分比函数切换到%（移动小数点）并设置单位。

$one-span-width: 0.0821875;
$gap: 0.00125;
@for $i from 1 through 12 {
 $span-width:  ($one-span-width * $i) + ($gap * $i) ;    
 .span#{$i}{
  width: percentage($span-width);     
 }
}

---

@威尔，我已经更新了它，似乎在某个地方变量赋值有点不对劲。我要去看看它有什么用。：）是的，变量没有设置好。古怪的根据我下面的回答，我绕过了它——效果很好，但不是100%确定原因。接受我的而不是你的，这太不体贴了，所以-祝你成功-谢谢！。

$one-span-width: 0.0821875;
$gap: 0.00125;
@for $i from 1 through 12 {
 $span-width:  ($one-span-width * $i) + ($gap * $i) ;    
 .span#{$i}{
  width: percentage($span-width);     
 }
}