将 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”的其他类的潜在冲突。