html - long - sass watch

Propiedad de CSS como valor de mezcla de SASS

Question

Esta pregunta ya tiene una respuesta aquí:

• Usar variables para propiedades de CSS en Sass 2 respuestas

Intento crear una mezcla universal de margen / relleno ...

Este es mi código:

[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);
  }
}

Algo no está bien, entonces me pregunto si es posible establecer alguna propiedad de CSS como un valor de mezcla. ¿Alguien puede ayudar?

Answer 1

Si desea utilizar variables como nombres de propiedad, debe usar la interpolación de cadenas - #{$var} .

Entonces esto debería funcionar:

[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);
  }
}

MANIFESTACIÓN

Solo una nota: para los selectores de atributos ... *="_m" también se aplicará a los que tienen _mid en ellos (ver aquí ) ... así que tal vez deberías reconsiderar esto un poco.