¿Puedo usar variables para selectores?

Question

tengo esta variable:

$gutter: 10; 

quiero utilizarlo en un selector al igual que SCSS:

.grid+$gutter { 
    background: red; 
} 

lo que la salida se convierte en CSS:

.grid10 { 
    background: red; 
} 

Pero Esto no tiene' t trabajo. ¿Es posible?

Answer 1

$gutter: 10; 

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

si se utiliza en una cadena, por ejemplo, en una url:

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

Answer 2

Aquí está la solución

$gutter: 10; 

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

Answer 3

Desde el Sass Reference on "Interpolation":

También puede utilizar Variables SassScript en selectores y nombres de propiedad usando # {} inter polación sintaxis:

$gutter: 10; 

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

Por otra parte, la directiva @each no es necesario para hacer que el trabajo de interpolación, y como su $gutter sólo contiene un valor, no hay necesidad de un bucle.

Si tuviera múltiples valores para crear reglas para, a continuación, podría utilizar un Sass list y @each:

$grid: 10, 40, 120, 240; 

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

... para generar el siguiente resultado:

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

Here are some more examples..