SCSS与选择器串联

我想要实现的是简单地循环并根据变量有多少列创建一个选择器. $numberOfColumns: 16;.gridContainer { @for $i from 1 through $nu

... . . 我想要实现的是简单地循环并根据变量有多少列创建一个选择器.

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

任何帮助都会很棒.

.

解决方法

. 您可以简单地使用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;}

DEMO

以下是对同一概念的更全面的解释：http://portfolio.miphe.com/showcase/sass-dry-selectors/

. . .. ...