css "vertical for-loop"- css 网格的助手 - 字符串重复/构建

Question

如果您听说过 css 网格，也许您无意中遇到了同样的问题:

我正在尝试使用 postcss 构建一个 for 循环来构建类似这样的东西，以便在我的页面中轻松使用类(为了简单起见，我在这里省略了 -ms- 支持，我必须在其中构建类似的东西，但是计算)

.ac-grid--even-1 {

        grid-template-columns: 1fr;
    }


.ac-grid--even-2 {

        grid-template-columns: 1fr 1fr;
    }


.ac-grid--even-3 {

        grid-template-columns: 1fr 1fr 1fr;
    }

我唯一的问题是......我怎么能重复水平的东西，比如 1fr 1fr 1fr ？正在寻找包裹和东西，但找不到有用的东西:<我正在寻找类似的东西:

  .ac-grid--even {

    @for $grid_number from 1 to 12 {
   &-$grid_number {

        grid-template-columns: $grid_number * '1fr ';
   }
    }
   }

谢谢

---

编辑:

感谢特里

对于 postcss 它只是有点不同，如果有人需要的话:

    $incrementalFr: 1fr;
    @for $grid_number from 1 to 12 {
        .ac-grid--even-$grid_number {

            grid-template-columns: $incrementalFr;
        }
        $incrementalFr: $incrementalFr 1fr;
    }

---

edit2:这种方式不适用于计算:/

例子:

    $incrementalFr: 1fr;
    $test: ;
    @for $grid_number from 1 to 12 {
        $col: $grid_number;
        $spacer: ($col - 1);
        $test: $test calc((100% / $col) - (($grid-gap * $spacer) / $col)) $grid-gap;

        &-$grid_number {
            -ms-grid-columns: $test;
            grid-template-columns: $incrementalFr;
        }
        $incrementalFr: $incrementalFr 1fr;
    }

这是有道理的，因为它一次只添加一个部分，导致字符串的“正确”长度，但数字增加而不是重复 block ^^

该死的 IE!!!

还有其他建议吗？解决方法？包裹？

Answer 1

您可以在 SASS 中使用以下逻辑:

1. 声明一个以 1fr 开头的变量，例如$incrementalFr: #{"1fr"};
2. 使用 @for 循环并从 1 循环到 13(不包括 13，因此总共有 12 个类)。
3. 在每个循环中，声明类并为其分配变量:grid-template-columns: $incrementalFr;
4. 在每次迭代结束时，您将 1fr 附加到变量(以便 1fr 在下一次迭代中重复一次)，使用 append( $incrementalFr, #{"1fr"})

这是 SASS 代码 ( check out the compiled CSS ):

$incrementalFr: #{"1fr"};

@for $grid_number from 1 to 13 {
  .ac-grid--even-#{$grid_number} {
      grid-template-columns: $incrementalFr;
  }
  $incrementalFr: append($incrementalFr, #{"1fr"});
}

编译后的 CSS(为简洁起见被截断)如下所示:

.ac-grid--even-1 {
  grid-template-columns: 1fr;
}

.ac-grid--even-2 {
  grid-template-columns: 1fr 1fr;
}

.ac-grid--even-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

// ...
// Lines are truncated for brevity
// ...

.ac-grid--even-12 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}