Wie kann ich CSS-Eigenschaften als SASS-Mixin-Werte verwenden?

CSS-Eigenschaft als SASS-Mixin-Wert

Beim Erstellen universeller Rand-/Padding-Mixins in SASS stoßen Sie möglicherweise auf Bedenken hinsichtlich der Festlegung von CSS-Eigenschaften als Mixin-Werte. Der bereitgestellte Codeausschnitt ist ein Versuch, diese Aufgabe zu erfüllen. Es sind jedoch bestimmte Änderungen erforderlich, um die volle Funktionsfähigkeit zu gewährleisten.

Lösung:

Der Schlüssel zur Lösung dieses Problems liegt in der String-Interpolation. Durch die Verwendung der #{$var}-Notation können Variablen als Eigenschaftsnamen verwendet werden.

Korrigierter Code:

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

DEMO:

Diese Korrektur stellt sicher, dass die CSS-Eigenschaft (Rand oder Abstand) basierend auf dem Parameter des Mixins dynamisch festgelegt werden kann.

Hinweis:

Für die Attributselektoren ...*="_m", es lohnt sich zu bedenken, dass dieser Selektor für alle Elemente gilt, deren Klassenname „_m“ enthält, einschließlich derjenigen mit „_mid“. Daher ist möglicherweise eine Neubewertung und Anpassung erforderlich, um die gewünschte Spezifität zu erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Eigenschaften als SASS-Mixin-Werte verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!