Definindo valores de mixin SASS para propriedades CSS

Ao criar mixins de margem/preenchimento universais, pode ser necessário definir propriedades CSS como valores de mixin. Para conseguir isso, a interpolação de strings é empregada.

Interpolação de strings para propriedades CSS

Para usar variáveis ​​como nomes de propriedades CSS, a interpolação de strings (#{$var}) é necessária.

Exemplo

O mixin a seguir demonstra como definir propriedades CSS usando interpolação de string:

[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

Ao usar seletores de atributos (*="_m"), é importante considerar os possíveis conflitos com outras classes que contenham "_mid" em seus nomes.