將 SASS Mixin 值設為 CSS 屬性

建立通用邊距/填入 mixin 時，可能需要將 CSS 屬性設為 mixin 值。為此，需要使用字串插值。

CSS 屬性的字串插值

要使用變數作為 CSS 屬性名稱，需要字串插值 (#{$var})。

範例

下面的 mixin 示範如何使用字串設定 CSS 屬性插值：

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

注意

使用屬性選擇器 (*="_m") 時，重要的是要考慮與名稱中包含「_mid」的其他類別的潛在衝突。