for循环中的SASS CSS重复变量答案

【问题标题】：SASS CSS repeat variable in for loopfor循环中的SASS CSS重复变量
【发布时间】：2018-11-07 18:19:57
【问题描述】：

我正在编写一些 SASS 来为网格输出多个列/行组合。它在现代浏览器中运行良好，因为它们都知道如何使用 CSS 的 repeat() 函数。但当然，我必须为 IE11 和 Edge 开发...

我有这个函数可以输出 1-12 列和 1-24 行之间的所有组合（是的，输出很多，但这是必要的）。

.grid-container {
  width:calc(100% + 10px);
  margin-left:-5px;
  margin-top:-5px;
  position:relative;

  &.s {

    @for $column from 1 through 12 {
      @for $row from 1 through 24 {
        &#{$column}x#{$row} {

          .grid {
            -ms-grid-columns: 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr;
            -ms-grid-rows: 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr;
            grid-template-columns: repeat($column, calc((100% / #{$column})));
            grid-template-rows: repeat($row, calc((100% / #{$row})));
            grid-column-gap: 0px;
            grid-row-gap: 0px;
          }
        }
      }
    }
  }
}

现在，我正在尝试弄清楚如何使 -ms-grid-columns 和 -ms-grid rows 动态化。目前，它只是为 12x12 网格构建的，但我希望它们具有正确数量的 fr 单位，具体取决于输出的网格大小。

我发现 LESS 有一个 merge 函数可以完美运行，但我不知道 SASS 中是什么

【问题讨论】：

标签： css sass

【解决方案1】：

您可以简单地递归地将某些内容附加到变量：

@function columns($n) {
    $thing: '';
    @for $count from 1 through $n {
        $thing: #{$thing} 1fr;
    }

    @return $thing;
}

【讨论】：

【解决方案2】：

您必须将row 和column 分开。您还必须使用带有 postcss 的 AutoPrefixer 作为 -ms 前缀。演示检查Autoprefixer online.

@for $col from 1 through 12{
    .grid-col-#{$col}{
        grid-template-columns: repeat($col, calc(100% / #{$col}));
    }
}
@for $row from 1 through 24{
    .grid-row-#{$row}{
        grid-template-rows: repeat($row, calc(100% / #{$row}));
    }
}

Autoprefixer 的 CSS 输出

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.grid-col-1 {
  -ms-grid-columns: (-webkit-calc(100% / 1))[1];
  -ms-grid-columns: (-moz-calc(100% / 1))[1];
  -ms-grid-columns: (calc(100% / 1))[1];
  grid-template-columns: repeat(1, -webkit-calc(100% / 1));
  grid-template-columns: repeat(1, -moz-calc(100% / 1));
  grid-template-columns: repeat(1, calc(100% / 1));
}

.grid-col-2 {
  -ms-grid-columns: (-webkit-calc(100% / 2))[2];
  -ms-grid-columns: (-moz-calc(100% / 2))[2];
  -ms-grid-columns: (calc(100% / 2))[2];
  grid-template-columns: repeat(2, -webkit-calc(100% / 2));
  grid-template-columns: repeat(2, -moz-calc(100% / 2));
  grid-template-columns: repeat(2, calc(100% / 2));
}

.grid-col-3 {
  -ms-grid-columns: (-webkit-calc(100% / 3))[3];
  -ms-grid-columns: (-moz-calc(100% / 3))[3];
  -ms-grid-columns: (calc(100% / 3))[3];
  grid-template-columns: repeat(3, -webkit-calc(100% / 3));
  grid-template-columns: repeat(3, -moz-calc(100% / 3));
  grid-template-columns: repeat(3, calc(100% / 3));
}

.grid-col-4 {
  -ms-grid-columns: (-webkit-calc(100% / 4))[4];
  -ms-grid-columns: (-moz-calc(100% / 4))[4];
  -ms-grid-columns: (calc(100% / 4))[4];
  grid-template-columns: repeat(4, -webkit-calc(100% / 4));
  grid-template-columns: repeat(4, -moz-calc(100% / 4));
  grid-template-columns: repeat(4, calc(100% / 4));
}

.grid-col-5 {
  -ms-grid-columns: (-webkit-calc(100% / 5))[5];
  -ms-grid-columns: (-moz-calc(100% / 5))[5];
  -ms-grid-columns: (calc(100% / 5))[5];
  grid-template-columns: repeat(5, -webkit-calc(100% / 5));
  grid-template-columns: repeat(5, -moz-calc(100% / 5));
  grid-template-columns: repeat(5, calc(100% / 5));
}

.grid-col-6 {
  -ms-grid-columns: (-webkit-calc(100% / 6))[6];
  -ms-grid-columns: (-moz-calc(100% / 6))[6];
  -ms-grid-columns: (calc(100% / 6))[6];
  grid-template-columns: repeat(6, -webkit-calc(100% / 6));
  grid-template-columns: repeat(6, -moz-calc(100% / 6));
  grid-template-columns: repeat(6, calc(100% / 6));
}

.grid-col-7 {
  -ms-grid-columns: (-webkit-calc(100% / 7))[7];
  -ms-grid-columns: (-moz-calc(100% / 7))[7];
  -ms-grid-columns: (calc(100% / 7))[7];
  grid-template-columns: repeat(7, -webkit-calc(100% / 7));
  grid-template-columns: repeat(7, -moz-calc(100% / 7));
  grid-template-columns: repeat(7, calc(100% / 7));
}

.grid-col-8 {
  -ms-grid-columns: (-webkit-calc(100% / 8))[8];
  -ms-grid-columns: (-moz-calc(100% / 8))[8];
  -ms-grid-columns: (calc(100% / 8))[8];
  grid-template-columns: repeat(8, -webkit-calc(100% / 8));
  grid-template-columns: repeat(8, -moz-calc(100% / 8));
  grid-template-columns: repeat(8, calc(100% / 8));
}

.grid-col-9 {
  -ms-grid-columns: (-webkit-calc(100% / 9))[9];
  -ms-grid-columns: (-moz-calc(100% / 9))[9];
  -ms-grid-columns: (calc(100% / 9))[9];
  grid-template-columns: repeat(9, -webkit-calc(100% / 9));
  grid-template-columns: repeat(9, -moz-calc(100% / 9));
  grid-template-columns: repeat(9, calc(100% / 9));
}

.grid-col-10 {
  -ms-grid-columns: (-webkit-calc(100% / 10))[10];
  -ms-grid-columns: (-moz-calc(100% / 10))[10];
  -ms-grid-columns: (calc(100% / 10))[10];
  grid-template-columns: repeat(10, -webkit-calc(100% / 10));
  grid-template-columns: repeat(10, -moz-calc(100% / 10));
  grid-template-columns: repeat(10, calc(100% / 10));
}

.grid-col-11 {
  -ms-grid-columns: (-webkit-calc(100% / 11))[11];
  -ms-grid-columns: (-moz-calc(100% / 11))[11];
  -ms-grid-columns: (calc(100% / 11))[11];
  grid-template-columns: repeat(11, -webkit-calc(100% / 11));
  grid-template-columns: repeat(11, -moz-calc(100% / 11));
  grid-template-columns: repeat(11, calc(100% / 11));
}

.grid-col-12 {
  -ms-grid-columns: (-webkit-calc(100% / 12))[12];
  -ms-grid-columns: (-moz-calc(100% / 12))[12];
  -ms-grid-columns: (calc(100% / 12))[12];
  grid-template-columns: repeat(12, -webkit-calc(100% / 12));
  grid-template-columns: repeat(12, -moz-calc(100% / 12));
  grid-template-columns: repeat(12, calc(100% / 12));
}

.grid-row-1 {
  -ms-grid-rows: (-webkit-calc(100% / 1))[1];
  -ms-grid-rows: (-moz-calc(100% / 1))[1];
  -ms-grid-rows: (calc(100% / 1))[1];
  grid-template-rows: repeat(1, -webkit-calc(100% / 1));
  grid-template-rows: repeat(1, -moz-calc(100% / 1));
  grid-template-rows: repeat(1, calc(100% / 1));
}

.grid-row-2 {
  -ms-grid-rows: (-webkit-calc(100% / 2))[2];
  -ms-grid-rows: (-moz-calc(100% / 2))[2];
  -ms-grid-rows: (calc(100% / 2))[2];
  grid-template-rows: repeat(2, -webkit-calc(100% / 2));
  grid-template-rows: repeat(2, -moz-calc(100% / 2));
  grid-template-rows: repeat(2, calc(100% / 2));
}

.grid-row-3 {
  -ms-grid-rows: (-webkit-calc(100% / 3))[3];
  -ms-grid-rows: (-moz-calc(100% / 3))[3];
  -ms-grid-rows: (calc(100% / 3))[3];
  grid-template-rows: repeat(3, -webkit-calc(100% / 3));
  grid-template-rows: repeat(3, -moz-calc(100% / 3));
  grid-template-rows: repeat(3, calc(100% / 3));
}

.grid-row-4 {
  -ms-grid-rows: (-webkit-calc(100% / 4))[4];
  -ms-grid-rows: (-moz-calc(100% / 4))[4];
  -ms-grid-rows: (calc(100% / 4))[4];
  grid-template-rows: repeat(4, -webkit-calc(100% / 4));
  grid-template-rows: repeat(4, -moz-calc(100% / 4));
  grid-template-rows: repeat(4, calc(100% / 4));
}

.grid-row-5 {
  -ms-grid-rows: (-webkit-calc(100% / 5))[5];
  -ms-grid-rows: (-moz-calc(100% / 5))[5];
  -ms-grid-rows: (calc(100% / 5))[5];
  grid-template-rows: repeat(5, -webkit-calc(100% / 5));
  grid-template-rows: repeat(5, -moz-calc(100% / 5));
  grid-template-rows: repeat(5, calc(100% / 5));
}

.grid-row-6 {
  -ms-grid-rows: (-webkit-calc(100% / 6))[6];
  -ms-grid-rows: (-moz-calc(100% / 6))[6];
  -ms-grid-rows: (calc(100% / 6))[6];
  grid-template-rows: repeat(6, -webkit-calc(100% / 6));
  grid-template-rows: repeat(6, -moz-calc(100% / 6));
  grid-template-rows: repeat(6, calc(100% / 6));
}

.grid-row-7 {
  -ms-grid-rows: (-webkit-calc(100% / 7))[7];
  -ms-grid-rows: (-moz-calc(100% / 7))[7];
  -ms-grid-rows: (calc(100% / 7))[7];
  grid-template-rows: repeat(7, -webkit-calc(100% / 7));
  grid-template-rows: repeat(7, -moz-calc(100% / 7));
  grid-template-rows: repeat(7, calc(100% / 7));
}

.grid-row-8 {
  -ms-grid-rows: (-webkit-calc(100% / 8))[8];
  -ms-grid-rows: (-moz-calc(100% / 8))[8];
  -ms-grid-rows: (calc(100% / 8))[8];
  grid-template-rows: repeat(8, -webkit-calc(100% / 8));
  grid-template-rows: repeat(8, -moz-calc(100% / 8));
  grid-template-rows: repeat(8, calc(100% / 8));
}

.grid-row-9 {
  -ms-grid-rows: (-webkit-calc(100% / 9))[9];
  -ms-grid-rows: (-moz-calc(100% / 9))[9];
  -ms-grid-rows: (calc(100% / 9))[9];
  grid-template-rows: repeat(9, -webkit-calc(100% / 9));
  grid-template-rows: repeat(9, -moz-calc(100% / 9));
  grid-template-rows: repeat(9, calc(100% / 9));
}

.grid-row-10 {
  -ms-grid-rows: (-webkit-calc(100% / 10))[10];
  -ms-grid-rows: (-moz-calc(100% / 10))[10];
  -ms-grid-rows: (calc(100% / 10))[10];
  grid-template-rows: repeat(10, -webkit-calc(100% / 10));
  grid-template-rows: repeat(10, -moz-calc(100% / 10));
  grid-template-rows: repeat(10, calc(100% / 10));
}

.grid-row-11 {
  -ms-grid-rows: (-webkit-calc(100% / 11))[11];
  -ms-grid-rows: (-moz-calc(100% / 11))[11];
  -ms-grid-rows: (calc(100% / 11))[11];
  grid-template-rows: repeat(11, -webkit-calc(100% / 11));
  grid-template-rows: repeat(11, -moz-calc(100% / 11));
  grid-template-rows: repeat(11, calc(100% / 11));
}

.grid-row-12 {
  -ms-grid-rows: (-webkit-calc(100% / 12))[12];
  -ms-grid-rows: (-moz-calc(100% / 12))[12];
  -ms-grid-rows: (calc(100% / 12))[12];
  grid-template-rows: repeat(12, -webkit-calc(100% / 12));
  grid-template-rows: repeat(12, -moz-calc(100% / 12));
  grid-template-rows: repeat(12, calc(100% / 12));
}

.grid-row-13 {
  -ms-grid-rows: (-webkit-calc(100% / 13))[13];
  -ms-grid-rows: (-moz-calc(100% / 13))[13];
  -ms-grid-rows: (calc(100% / 13))[13];
  grid-template-rows: repeat(13, -webkit-calc(100% / 13));
  grid-template-rows: repeat(13, -moz-calc(100% / 13));
  grid-template-rows: repeat(13, calc(100% / 13));
}

.grid-row-14 {
  -ms-grid-rows: (-webkit-calc(100% / 14))[14];
  -ms-grid-rows: (-moz-calc(100% / 14))[14];
  -ms-grid-rows: (calc(100% / 14))[14];
  grid-template-rows: repeat(14, -webkit-calc(100% / 14));
  grid-template-rows: repeat(14, -moz-calc(100% / 14));
  grid-template-rows: repeat(14, calc(100% / 14));
}

.grid-row-15 {
  -ms-grid-rows: (-webkit-calc(100% / 15))[15];
  -ms-grid-rows: (-moz-calc(100% / 15))[15];
  -ms-grid-rows: (calc(100% / 15))[15];
  grid-template-rows: repeat(15, -webkit-calc(100% / 15));
  grid-template-rows: repeat(15, -moz-calc(100% / 15));
  grid-template-rows: repeat(15, calc(100% / 15));
}

.grid-row-16 {
  -ms-grid-rows: (-webkit-calc(100% / 16))[16];
  -ms-grid-rows: (-moz-calc(100% / 16))[16];
  -ms-grid-rows: (calc(100% / 16))[16];
  grid-template-rows: repeat(16, -webkit-calc(100% / 16));
  grid-template-rows: repeat(16, -moz-calc(100% / 16));
  grid-template-rows: repeat(16, calc(100% / 16));
}

.grid-row-17 {
  -ms-grid-rows: (-webkit-calc(100% / 17))[17];
  -ms-grid-rows: (-moz-calc(100% / 17))[17];
  -ms-grid-rows: (calc(100% / 17))[17];
  grid-template-rows: repeat(17, -webkit-calc(100% / 17));
  grid-template-rows: repeat(17, -moz-calc(100% / 17));
  grid-template-rows: repeat(17, calc(100% / 17));
}

.grid-row-18 {
  -ms-grid-rows: (-webkit-calc(100% / 18))[18];
  -ms-grid-rows: (-moz-calc(100% / 18))[18];
  -ms-grid-rows: (calc(100% / 18))[18];
  grid-template-rows: repeat(18, -webkit-calc(100% / 18));
  grid-template-rows: repeat(18, -moz-calc(100% / 18));
  grid-template-rows: repeat(18, calc(100% / 18));
}

.grid-row-19 {
  -ms-grid-rows: (-webkit-calc(100% / 19))[19];
  -ms-grid-rows: (-moz-calc(100% / 19))[19];
  -ms-grid-rows: (calc(100% / 19))[19];
  grid-template-rows: repeat(19, -webkit-calc(100% / 19));
  grid-template-rows: repeat(19, -moz-calc(100% / 19));
  grid-template-rows: repeat(19, calc(100% / 19));
}

.grid-row-20 {
  -ms-grid-rows: (-webkit-calc(100% / 20))[20];
  -ms-grid-rows: (-moz-calc(100% / 20))[20];
  -ms-grid-rows: (calc(100% / 20))[20];
  grid-template-rows: repeat(20, -webkit-calc(100% / 20));
  grid-template-rows: repeat(20, -moz-calc(100% / 20));
  grid-template-rows: repeat(20, calc(100% / 20));
}

.grid-row-21 {
  -ms-grid-rows: (-webkit-calc(100% / 21))[21];
  -ms-grid-rows: (-moz-calc(100% / 21))[21];
  -ms-grid-rows: (calc(100% / 21))[21];
  grid-template-rows: repeat(21, -webkit-calc(100% / 21));
  grid-template-rows: repeat(21, -moz-calc(100% / 21));
  grid-template-rows: repeat(21, calc(100% / 21));
}

.grid-row-22 {
  -ms-grid-rows: (-webkit-calc(100% / 22))[22];
  -ms-grid-rows: (-moz-calc(100% / 22))[22];
  -ms-grid-rows: (calc(100% / 22))[22];
  grid-template-rows: repeat(22, -webkit-calc(100% / 22));
  grid-template-rows: repeat(22, -moz-calc(100% / 22));
  grid-template-rows: repeat(22, calc(100% / 22));
}

.grid-row-23 {
  -ms-grid-rows: (-webkit-calc(100% / 23))[23];
  -ms-grid-rows: (-moz-calc(100% / 23))[23];
  -ms-grid-rows: (calc(100% / 23))[23];
  grid-template-rows: repeat(23, -webkit-calc(100% / 23));
  grid-template-rows: repeat(23, -moz-calc(100% / 23));
  grid-template-rows: repeat(23, calc(100% / 23));
}

.grid-row-24 {
  -ms-grid-rows: (-webkit-calc(100% / 24))[24];
  -ms-grid-rows: (-moz-calc(100% / 24))[24];
  -ms-grid-rows: (calc(100% / 24))[24];
  grid-template-rows: repeat(24, -webkit-calc(100% / 24));
  grid-template-rows: repeat(24, -moz-calc(100% / 24));
  grid-template-rows: repeat(24, calc(100% / 24));
}

HTML 用法：

<div class="grid-col-1 grid-row-1"></div>

【讨论】：