我可以使用variablesselect器吗？

我有这个variables：

$gutter: 10; 

我想在像SCSS这样的select器中使用它：

 .grid+$gutter { background: red; } 

所以输出成为CSS：

 .grid10 { background: red; } 

但是这不起作用。 可能吗？

Answer 1

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

如果在一个string中使用，例如在一个url中：

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

Answer 2

从“插值”的Sass参考

您还可以使用＃{}插值语法在select器和属性名称中使用SassScriptvariables：

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

此外， @each指令不需要进行插值工作，并且由于$gutter只包含一个值，所以不需要循环。

如果您有多个值来创build规则，则可以使用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; } 

这里是一些更多的例子。 。

Answer 3

这是解决scheme

 $gutter: 10; @each $i in $gutter { .g#{$i}{ background: red; } }