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;}

任何帮助都会很棒.

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/