So verwenden Sie CSS-Eigenschaften als SASS-Mixin-Werte: Eine Anleitung zur String-Interpolation

CSS-Eigenschaften als SASS-Mixin-Werte verwenden

Beim Versuch, ein vielseitiges Rand-/Padding-Mixin zu erstellen, sind Sie auf einen Haken in SASS gestoßen. Lassen Sie uns das von Ihnen beschriebene Problem untersuchen und gemeinsam eine Lösung finden.

CSS-Eigenschaften in Mixins festlegen

Ihr Code versucht, CSS-Eigenschaften (Rand und Abstand) innerhalb von SASS-Mixin-Werten festzulegen. Es gibt jedoch ein zentrales Problem: CSS-Eigenschaften können nicht direkt als Mixin-Werte verwendet werden. Stattdessen müssen Sie eine Technik namens „String-Interpolation“ anwenden, um Variablen als Eigenschaftsnamen einzubeziehen.

String-Interpolation verwenden

String-Interpolation ermöglicht Ihnen das Einfügen von Variablenwerten in Strings mithilfe des #{$ Variable}-Syntax. Dies hilft Ihnen, CSS-Eigenschaften dynamisch basierend auf Variablen in Mixins festzulegen.

So können Sie Ihren Code ändern, um String-Interpolation zu verwenden:

<code class="sass">[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 zu Attributselektoren

Es ist wichtig zu beachten, dass der von Ihnen verwendete Attributselektor (*="_m") auch Elemente mit „_mid“ in ihren Klassennamen abgleicht. Dies ist möglicherweise nicht das von Ihnen beabsichtigte Verhalten. Überarbeiten Sie daher Ihre Attributauswahl entsprechend.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Eigenschaften als SASS-Mixin-Werte: Eine Anleitung zur String-Interpolation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!