如何使用 CSS 屬性作為 SASS Mixin 值：字串插值指南

使用 CSS 屬性作為 SASS Mixin 值

在嘗試建立通用的邊距/填充混合時，您在 SASS 中遇到了障礙。讓我們深入研究您描述的問題並一起找到解決方案。

在 Mixins 中設定 CSS 屬性

您的程式碼嘗試在 SASS mixin 值中設定 CSS 屬性（邊距和填滿）。然而，有一個關鍵問題：CSS 屬性不能直接用作 mixin 值。相反，您需要採用一種稱為“字串插值”的技術來將變數包含為屬性名稱。

使用字串插值

字串插值可讓您使用 #{$ 將變數值插入字串中變數} 語法。這可以幫助您根據 mixins 中的變數動態設定 CSS 屬性。

以下是如何修改程式碼以利用字串插值：

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

關於屬性選擇器的注意事項

需要注意的是，您使用的屬性選擇器(*="_m") 也會符合類別名稱中帶有「_mid」的元素。這可能不是您想要的行為，因此請考慮相應地修改您的屬性選擇器。

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