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中建议的那样。

Answer 2

您可以使用[attr^=val]选择器定位class以column-开头的所有元素。这样可以防止重复选择器/规则并最小化生成的CSS的大小。

Demo of technique

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

[class^="column-"] {
  display:block;
]

Answer 3

或许这样的事情？

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

然后，除了column

之外，只需将column-1类应用于div

Answer 4

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

SASS扩展动态

4 个答案:

DEMO