SCSS选择器合并拼接

Question

我尝试达到的目标是简单地循环并创建一个基于变量包含的列数的选择器。

$numberOfColumns: 16;
.gridContainer {
  @for $i from 1 through $numberOfColumns {
    .grid_#{$i} @if $i != $numberOfColumns {,}
    {position:relative;}        
  }
}

这显然不起作用。

我试图输出像这样的东西：

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {position:relative;}

任何帮助都将是极好的。

- Shannon Hochkins

Answer 1

您可以简单地使用 join 来创建一个包含所有逗号分隔的类别的变量，并在此之后使用它。以下是示例代码：

$numberOfColumns: 16;

$classes: ();
@for $i from 1 through $numberOfColumns {
    $classes: join($classes, unquote(".grid_#{$i} "), comma);
}

.gridContainer {
    #{$classes} { position:relative; }
}

产生的输出：

.gridContainer .grid_1, .gridContainer .grid_2, .gridContainer .grid_3, .gridContainer .grid_4, .gridContainer .grid_5, .gridContainer .grid_6, .gridContainer .grid_7, .gridContainer .grid_8, .gridContainer .grid_9, .gridContainer .grid_10, .gridContainer .grid_11, .gridContainer .grid_12, .gridContainer .grid_13, .gridContainer .grid_14, .gridContainer .grid_15, .gridContainer .grid_16 {
    position:relative;
}

演示

这是同一个概念的更详细说明：http://portfolio.miphe.com/showcase/sass-dry-selectors/

- Alp

---

提醒一下，现在已经过去了7年，你提供的链接都已失效。 - adamdport

Answer 2

这种情况通常需要使用一个占位符选择器：

有时您会为一个类编写样式，只希望通过@extend来使用，而不想直接在HTML中使用。这在编写Sass库时尤其如此，您可能会为用户提供可以@extend的样式，如果他们不需要则可以忽略。

[...]

占位符选择器看起来像类选择器和id选择器，除了#或.被替换为%之外。它们可以用在任何类或id可以使用的地方，并且单独使用它们可以防止规则集被渲染到CSS中。

placeholders @ sass-lang.com

---

使用占位符选择器，您可以将所有列共有的属性收集到单个规则中：

%grid-column {
  // common column properties...
}

然后使用@extend指令将.grid-container .grid-i选择器添加到占位符规则中：

$num-grid-cols: 2;
.grid-container {
  @for $i from 1 through $num-grid-cols {
    .grid-#{$i} {
      @extend %grid-column;
      // grid-$i specific properties...
    }
  }
}

生成的CSS将如下所示：

.grid-container .grid-1, .grid-container .grid-2 {
  // common column properties... 
}

.grid-container .grid-1 {
  // grid-1 specific properties... 
}

.grid-container .grid-2 {
  // grid-2 specific properties... 
}

- Russ Ferri