如何使用 CSS 屬性作為 SASS Mixin 值？

CSS 屬性作為SASS Mixin 值

在SASS 中建立通用邊距/填充混合時，您可能會遇到將CSS 屬性設定為混合值。提供的程式碼片段是完成此任務的嘗試。但要使其完全發揮作用，還需要進行一定的修改。

解：

解決這個問題的關鍵在於字串插值。透過利用 #{$var} 表示法，可以使用變數作為屬性名稱。

更正程式碼：

[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:

此修正參數可以根據mixin 的參數動態設定CSS 屬性（邊距或填充）。

注意：

對於屬性選擇器...*="_m"，值得考慮的是，該選擇器將應用於類別名稱中包含“_m 」的所有元素，包括那些包含「_mid」的元素。因此，可能需要一些重新評估和調整才能達到所需的特異性。

以上是如何使用 CSS 屬性作為 SASS Mixin 值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！