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

使用CSS 屬性值作為SASS Mixin 參數

在嘗試建立通用邊距/填充混合時，您遇到了涉及設定的問題CSS 屬性為mixin 值。本文旨在透過探索 SASS mixin 中字串插值的使用來解決此問題。

要將 CSS 屬性值設為 mixin 值，您需要使用字串插值。這種技術使您能夠將變數作為屬性名稱嵌入到 mixin 定義中。

這是包含字串插值的程式碼的更新版本：

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

#{$val} 語法中mixin 定義可讓您動態設定 CSS 屬性名稱。

注意：

• 像*="_m" 這樣的屬性選擇器也可能適用於包含以下內容的元素：類別名稱中包含「_mid 」。這可能會促使您重新考慮命名策略。
• 字串插值對於在 mixin 定義中使用變數作為屬性名稱至關重要。

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