Question

我正在SASS上基于12列的网格进行编程。我使用@for遍历值以将其分配给“ col-”。取决于数量，是宽度。问题是当我将装订线（3％）乘以（12-迭代器）的算术表达式时，此消息出现：

错误：未定义的操作：“ 3％乘以12-1”。

我已经尝试为12个迭代器分配一个值，并缩进-符号，因为我知道sass有时会将它与负数混淆。

$columns: 12;
$grid-gutter: 3%;
@for $j from 1 to $columns {
    .col-#{$j}{
      width: (100% / (12/#{$j})) - ($grid-gutter*(12 - #{$j}) / 12 );
        }
 }

我希望是，对于j = 1：

width:(100% / 12) - ($grid-gutter * 11 / 12);

Answer 1

在计算中使用变量interpolation时，还需要使用calc()，否则它将返回错误。就您而言，您还忘记了插值$grid-gutter。

width: calc((100% / (12 / #{$j})) - (#{$grid-gutter}  * (12 - #{$j}) / 12 ));

也就是说，在这种情况下，您实际上不需要calc()或插值，您可以直接使用变量：

width: (100% / (12 / $j)) - ($grid-gutter * (12 - $j) / 12);

它将编译为：

.col-1 { width: 5.5833333333%; }
.col-2 { width: 14.1666666667%; }
.col-3 { width: 22.75%; }
...

如何将百分比与算术表达式相乘

1 个答案: