我可以将多个网格列声明压缩为一个吗？

Question

.col1 {
    grid-column: 1;
}
.col2 {
    grid-column: 2;
}
.col3 {
    grid-column: 3;
}

有什么办法可以把它浓缩成一个部分，I.E

.col[0-9]{
    grid-column: [0-9];
}

Answer 1

不使用常规 CSS，但使用 Sass，您可以像这样使用 @for 循环：

@for $i from 1 through 9 {
  .col#{$i} {
    grid-column: #{$i};
  }
}