CSS属性作为SASS混合值[重复]

Posted 2023-02-22

【中文标题】CSS属性作为SASS混合值[重复]

【英文标题】：CSS property as SASS mixin value [duplicate]

【发布时间】：2013-12-01 18:56:01

【问题描述】：

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

这是我的代码：

[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 值？有人可以帮忙吗？

【参考方案1】：

如果你想使用变量作为属性名，你需要使用string interpolation - #$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 的那些（请参阅here）...所以也许您应该重新考虑一下。