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属性，但您明白了。

Sass物品的相互属性

1 个答案: