项目的 Sass 互属性

【问题标题】：Sass mutual properties for items项目的 Sass 互属性
【发布时间】：2013-05-08 06:49:09
【问题描述】：

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

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

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

【问题讨论】：

你试过那个代码了吗？您收到错误了吗（错误是什么）？输出不正确？
@cimmanon，是的，代码一开始甚至都没有编译，但经过一些按摩并使用placeholder，OP 可以获得所需的结果。

标签： sass

【解决方案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 属性，但您明白了。

【讨论】：

正是我想要的。谢谢！