我可以将变量用于选择器吗？

Question

我有这个变量:

$gutter: 10;

我想在像SCSS这样的选择器中使用它:

.grid+$gutter {
    background: red;
}

所以输出变成CSS:

.grid10 {
    background: red;
}

但这不起作用.可能吗？

Answer 1

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

如果在字符串中使用,例如在url中:

background: url('/ui/all/fonts/#{$filename}.woff')

Answer 2

来自"插值"的Sass参考:

您还可以使用#{}插值语法在选择器和属性名称中使用SassScript变量:

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

此外,@each不需要使用该指令来进行插值工作,并且由于您$gutter只包含一个值,因此不需要循环.

如果您有多个值来创建规则,则可以使用Sass列表并@each:

$grid: 10, 40, 120, 240;

@each $i in $grid {
  .g#{$i}{
    width: #{$i}px;
  }
}

...生成以下输出:

.g10  { width: 10px; }
.g40  { width: 40px; }
.g120 { width: 120px; }
.g240 { width: 240px; }

这里有一些例子..