sass - 如何枚举 SCSS 类

Question

这个问题在这里已经有了答案:





How to dynamically generate a list of classes with commas separating them?

(3 个回答)


6年前关闭。




如何在 Sass (scss) 中用逗号分隔类而不在编译代码中重复 CSS 本身？

我有:

@for $i from 1 through ($maxcolumns){
  .col#{$i}{
    //code for all columns
  }
}

这产生

.col1{
  //code
}
.col2{
  //code
}

但是我更喜欢

.col1, .col2, ...{
  //code
}

谢谢!

Answer 1

这就是@extend 的用途:

%commonStyles {
    border: 1px solid;
}

@for $i from 1 through 5 {
  .col#{$i}{
    @extend %commonStyles;
  }
}

产生:

.col1, .col2, .col3, .col4, .col5 {
  border: 1px solid;
}