如何枚举SCSS类

时间:2012-10-03 11:49:56

标签: sass

如何在编译代码中不重复CSS本身的情况下用逗号分隔Sass(s​​css)中的类?

我有:

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

生成

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

但我更喜欢

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

谢谢!

1 个答案:

答案 0 :(得分:3)

这就是@extend的用途:

%commonStyles {
    border: 1px solid;
}

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

生成:

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