セレクタに変数を使用することはできますか？

Question

私は、この変数を持っている：

.grid+$gutter { 
    background: red; 
} 

ので、出力はCSS次のようになります：私はSCSSのようなセレクタでそれを使用したい

$gutter: 10; 

.grid10 { 
    background: red; 
} 

しかし、これは」doesnの仕事。出来ますか？ URL内の例えば文字列で使用する場合はここで

Answer 1

$gutter: 10; 

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

ソリューションです：

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

Answer 2

は

$gutter: 10; 

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

Answer 3

Sass Reference on "Interpolation"から：

あなたが使用することもでき

＃{} interを使用したセレクタとプロパティ名のSassScript変数polation構文：

$gutter: 10; 

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

さらに、@eachディレクティブは、補間動作させるために必要とされていない、とあなたの$gutter 1つの値のみが含まれているとして、ループのための必要はありません。

あなたのためのルールを作成するには、複数の値を持っていた場合、あなたはその後、Sass listと@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; } 

Here are some more examples.を。