css - nuevos - ¿Puedo usar variables para selectores?

selectores de atributos css

Question

Tengo esta variable:

$gutter: 10;

Quiero usarlo en un selector como SCSS:

.grid+$gutter {
    background: red;
}

entonces el resultado se convierte en CSS:

.grid10 {
    background: red;
}

Pero esto no funciona. ¿Es posible?

Answer 1

Aquí está la solución

$gutter: 10;

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

Answer 2

De la referencia de Sass en "Interpolación" :

También puede usar variables SassScript en selectores y nombres de propiedad usando # {} sintaxis de interpolación:

$gutter: 10;

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

Además, la directiva @each no es necesaria para que funcione la interpolación, y como $gutter solo contiene un valor, no hay necesidad de un bucle.

Si tenía varios valores para crear reglas, podría usar una lista Sass 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; }

Aquí hay algunos ejemplos más. .

Answer 3

$gutter: 10;

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

Si se usa en una cadena, por ejemplo, en una url:

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