小编And*_*dai的帖子

我正在尝试在 CSS/scss 中构建我自己的小型可扩展网格。到目前为止，我发现了这个决定：

:root {
  --page-width: 1170px;
  --gutter: 15px;
  --columns: 12;
}

.wrapper {
  max-width: var(--page-width);
  margin-right: auto;
  margin-left: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.row {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
}

.col {
  display: block;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

然后我尝试使用 scss 来缩短列类描述（同时允许我在整个代码的一个地方更改列数 - 在 CSS Variable 中--columns）像这样

@for $n from 1 through var(--columns) {
  .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }
}

但它没有用。有趣的细节是，当我将@for语句从@for $n …