Können SASS-Mixin-Werte dynamische CSS-Eigenschaften sein?

Können SASS-Mixin-Werte CSS-Eigenschaften sein?

Problem:

Erstellen eines universellen Randes /padding mixin, Sie hatten aufgrund einer falschen Codestruktur keinen Erfolg:

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

Lösung:

Um Variablen als CSS-Eigenschaftsnamen in einem Mixin-Wert zu verwenden , String-Interpolation ist erforderlich, erreicht mit der #{$var}-Syntax:

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

Hinweis: Stellen Sie die Selektorspezifität sicher, indem Sie die Attributselektorstruktur neu bewerten.

Das obige ist der detaillierte Inhalt vonKönnen SASS-Mixin-Werte dynamische CSS-Eigenschaften sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!