Wie legt man CSS-Eigenschaften mithilfe der String-Interpolation als Mixin-Werte in SASS fest?

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 eingesetzt.

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 der String-Interpolation festgelegt werden:

<code class="scss">[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);
  }
}</code>

Hinweis

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

Das obige ist der detaillierte Inhalt vonWie legt man CSS-Eigenschaften mithilfe der String-Interpolation als Mixin-Werte in SASS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!