sass - 项目的 Sass 互属性

Question

我正在用 Sass 创建一个网格系统。我创建了从 .col1 到 .col8 的类。现在我想为所有这些类动态地创建一个相互选择器（.col1、.col2、...、.col8）。我怎样才能做到这一点？

$siteWidth: 80em
$columnCount: 8
$columnWidth: $siteWidth / $columnCount

@for $i from 1 through $columnCount
  .col#{$i}
    width: $columnWidth * $i

Answer 1

你需要使用一个placeholder，这个Sass：

$siteWidth: 80em;
$columnCount: 8;
$columnWidth: $siteWidth / $columnCount;

%col {
  height: 10px;
}

.col1 {
  @extend %col;
}

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

@for $i from 1 through $columnCount {
  .col#{$i} {
    width: $columnWidth * $i;
  }
}

将生成这个CSS：

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8 {
  height: 10px; }

.col1 {
  width: 10em; }

.col2 {
  width: 20em; }

.col3 {
  width: 30em; }

.col4 {
  width: 40em; }

.col5 {
  width: 50em; }

.col6 {
  width: 60em; }

.col7 {
  width: 70em; }

.col8 {
  width: 80em; }

现在，您可能不想设置该height属性，但您明白了。