html 作为SASS mixin值的CSS属性



sass scss (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);
  }
}

DEMO

只是一个注释:对于你的属性选择器... *="_m"也适用于那些有_mid在他们(见这里 )...所以也许你应该重新考虑这一点。

https://ffff65535.com

这个问题在这里已经有了答案:

我试图建立一些通用的边缘/填充混合...

这是我的代码:

[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属性作为一个混合值? 任何人都可以帮忙吗?





mixins