SASS: variables dentro de clases

Con SASS podemos crear una variable y usarla dentro de un determinado selector o clase.

Para ello usaremos la interpolación de SASS envolviendo la variable dentro de la expresión #{}:

Algunos ejemplo de uso:

$nombre: "leon";

.header-#{$nombre} {
  color: black;
}
.#{$nombre}-footer {
  color: yellow;
}
body{
  .#{$nombre}{
    color: blue;
  }
}

/* Imprime */
.header-leon {
  color: black;
}
.leon-footer {
  color: yellow;
}
body .leon {
  color: blue;
}