在for循环sass中向变量添加％单位[重复]答案

【问题标题】：adding a % unit to a Variable in a for loop sass [duplicate]在for循环sass中向变量添加％单位[重复]
【发布时间】：2014-02-19 05:37:26
【问题描述】：

我尝试在 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;
        }
      }
    }

}

【问题讨论】：

标签： sass

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

“乘法以星号 * 完成，但只有一个数字（如果有）可能包含测量单位。使用百分号 %，将返回两个数字除以时的余数，并且与乘法一样，仅允许一个数字（如果有）有一个单位。”

另外，是否可以使用 Sass 百分比函数？请参阅 Stack 上的上一个问题：Calculate a percent with SCSS/SASS

【讨论】：