Wie kann ich CSS-Eigenschaftswerte als SASS-Mixin-Parameter verwenden?

CSS-Eigenschaftswerte als SASS-Mixin-Parameter verwenden

Beim Versuch, ein universelles Rand-/Padding-Mixin zu erstellen, ist ein Problem mit der Einstellung aufgetreten CSS-Eigenschaften als Mixin-Werte. Dieser Artikel zielt darauf ab, dieses Problem zu lösen, indem er die Verwendung der String-Interpolation in SASS-Mixins untersucht.

Um CSS-Eigenschaftswerte als Mixin-Werte festzulegen, müssen Sie die String-Interpolation verwenden. Mit dieser Technik können Sie Variablen als Eigenschaftsnamen in Mixin-Definitionen einbetten.

Hier ist eine aktualisierte Version Ihres Codes, die String-Interpolation enthält:

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

Die #{$val}-Syntax innerhalb der Mit der Mixin-Definition können Sie den Namen der CSS-Eigenschaft dynamisch festlegen.

Hinweis:

• Attributselektoren wie *="_m" können auch auf Elemente angewendet werden, die enthalten „_mid“ in ihren Klassennamen. Dies könnte Sie dazu veranlassen, Ihre Benennungsstrategie zu überdenken.
• String-Interpolation ist entscheidend für die Verwendung von Variablen als Eigenschaftsnamen in Mixin-Definitionen.

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