Configuración de valores Mixin SASS en propiedades CSS

Al crear mixins de margen/relleno universales, puede ser necesario configurar propiedades CSS como valores mixin. Para lograr esto, se emplea la interpolación de cadenas.

Interpolación de cadenas para propiedades CSS

Para usar variables como nombres de propiedades CSS, se requiere la interpolación de cadenas (#{$var}).

Ejemplo

El siguiente mixin demuestra cómo configurar propiedades CSS usando interpolación de cadenas:

[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}

Nota

Al usar selectores de atributos (*="_m"), es importante considerar los posibles conflictos con otras clases que contienen "_mid" en sus nombres.