如何枚举 SCSS 类

本文介绍了如何枚举 SCSS 类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

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

How can I comma-separate classes in Sass (scss) without repeating the CSS itself in the compiled code?

我有:

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

产生

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

但我更喜欢

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

谢谢！

@extend 就是为了:

That's what @extend is for:

%commonStyles {
    border: 1px solid;
}

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

生成:

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

这篇关于如何枚举 SCSS 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！