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!
