SASS-Mixin-Werte auf CSS-Eigenschaften festlegen

Beim Erstellen universeller Rand-/Padding-Mixins kann es erforderlich sein, CSS-Eigenschaften als Mixin-Werte festzulegen. Um dies zu erreichen, wird String-Interpolation verwendet.

String-Interpolation für CSS-Eigenschaften

Um Variablen als CSS-Eigenschaftsnamen zu verwenden, ist String-Interpolation (#{$var}) erforderlich.

Beispiel

Das folgende Mixin zeigt, wie CSS-Eigenschaften mithilfe von Zeichenfolgen festgelegt werden Interpolation:

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

Hinweis

Bei der Verwendung von Attributselektoren (*="_m") ist es wichtig, mögliche Konflikte mit anderen Klassen zu berücksichtigen, deren Namen „_mid“ enthalten.