SASS Mixin 值可以是動態 CSS 屬性嗎？-css教學-PHP中文網

SASS Mixin 值可以是動態 CSS 屬性嗎？

Barbara Streisand

發布： 2024-10-27 10:52:30

原創

1000 人瀏覽過

Can SASS Mixin Values Be Dynamic CSS Properties?

SASS Mixin 值可以是 CSS 屬性嗎？

問題：

建立通用邊距/padding 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);
  }
}

登入後複製

解：

在mixin 值中使用變數作為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);
  }
}

登入後複製

注意：

透過重新評估屬性選擇器結構來確保選擇器特異性。

以上是SASS Mixin 值可以是動態 CSS 屬性嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！