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百分比功能？请参阅Stack上的上一个问题：Calculate a percent with SCSS/SASS

将％单位添加到for循环sass中的Variable

2 个答案: