向for循环sass中的变量添加% unit

Question

我试图创建一个灵活的表格网格，它在一个for循环中，它在PX上工作得很好，但我不能得到添加的%，它给了我一个错误。

$fg-column: 20px;
$$fg-max-columns:41;

 width:(#{($fg-column /$fg-max-columns)}#{"%"}) * $i);

.table-grid-layout{
    &.is-fluid{
      @include fill-parent;
      @for $i from 1 through 41 {
        .column-#{$i} {
          width:(#{($fg-column /$fg-max-columns)}#{"%"}) * $i);
        }
      }
    }
    &.not-fluid{
      @include outer-container;
      @for $i from 1 through 41 {
        .column-#{$i} {
            width: 20px * $i;
        }
      }
    }

}

Answer 1

简单地将百分号作为字符串添加到像素值将不会达到您想要的结果。如果您想要获得百分比值，则需要将该迭代的列数除以总列数：

.column-#{$i} {
  width: percentage($i / $fg-max-columns);
}

此外，请注意，这种方法不是语义的，因为您最终得到的是描述布局本身的类，而不是内容。

Answer 2

有没有可能百分号实际上是在试图返回等式的其余部分？

请查看以下来源的段落：http://learn.shayhowe.com/advanced-html-css/preprocessors

“乘法以星号*完成，但是只有一个数字(如果有的话)可以包含度量单位。使用百分号%将在除法时返回两个数字的余数，与乘法一样，只允许一个数字有一个单位。”

另外，是否可以使用Sass百分比函数？请看前面关于堆栈的问题：Calculate a percent with SCSS/SASS