css - SASS 扩展动态

Question

我有一个 SASS 函数用于计算列宽:

@for $i from 1 through $number-of-columns {
  .column-#{$i} {
     width: ($i / $number-of-columns) * 100%;
  }
}

效果很好，输出符合预期:

.column-12 {
  width: 100%;
}
.column-11 {
  width: 91.666667%;
}
.column-10 {
  width: 83.333334%;
}

但现在我想像这样对所有这些类应用一种样式:

column-1, column-2, column-3...column-12 {
    display: block;
}

有没有一种简单的方法可以使用 @extend 来做到这一点？

Answer 1

只是为了说明如何为此使用 @extend。您可能希望定义一个占位符规则(例如%all-columns)，它在每次迭代中由另一个类扩展。像这样:

%all-columns {
  display: block;
}

@for $i from 1 through $number-of-columns {
  .column-#{$i} {
     width: ($i / $number-of-columns) * 100%;
     @extend %all-columns;
  }
}

DEMO

输出CSS:

.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {
  display: block;
}

.column-1 {
  width: 8.33333%;
}

.column-2 {
  width: 16.66667%;
}

...

但是如果你想避免这么长的选择器，你应该考虑一个属性选择器，就像 Daniel's answer 中建议的解决方案一样.