CSS属性作为SASS mixin值

Question

我尝试建立一些通用的边距/填充混合…

这是我的代码：

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

某些事情不正确，所以我想知道是否可以将一些CSS属性设置为mixin值吗？有人可以帮忙吗？

Answer 1

如果要使用变量作为属性名称，则需要使用 字符串插值 - #{$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);
  }
}

只需注意： 对于属性选择器… *="_m"也将适用于其中的属性选择器_mid …因此也许您应该重新考虑一下。