Sass使用@content进行操作

可以在SASS中使用

@content

魔术变量进行操作吗？ 我想在输出之前替换这里的一些东西。 或者我可以用它填充一些变量

结论是，我想制作一个mixin

@important

，创建两个版本。重要，也不重要

输入

.test {
  @include important {
    color: red;
    text-align: left;
  }
}

.test {
  color: red;
  text-align: left;
}
.test-i {
  color: red !important;
  text-align: left !important;
}

预期产出

.test {
  @include important {
    color: red;
    text-align: left;
  }
}

.test {
  color: red;
  text-align: left;
}
.test-i {
  color: red !important;
  text-align: left !important;
}

---

不，你不能但是我很快给你写了一个

mixin

让它工作起来。它还不接受多个

属性

第一个注意事项：我更改了
mixin
它现在接受多个
属性
。这是你的电话号码

第二个注意事项：我更新了
mixin
，添加多个属性不会再为每个
属性编译到不同的类，而是会得到两个版本，一个没有
！重要信息
后缀和带的后缀

这是混音：

@function return($state) {
  @return if($state == '', '', '-i');
}

@mixin loop($name, $items...) { 
  @each $item in $items / 2 {   
    @each $state in ('', '!important') {
      $suffix: return($state);
      
      .#{$name}#{$suffix} { 
        @for $i from 1 through (length($items) / 2) { 
          #{nth($items, ($i * 2) - 1)}: #{nth($items, ($i * 2))} #{$state};
        }
      }
    }
  }
}

这就是您如何包含它的方式：

// @include loop([classname], [property], [value]);

@include loop(whateverClassname, color, red);

这是它编译的内容：

.whateverClassname {
  color: red ;
}

.whateverClassname-i {
  color: red !important;
}


当您同时使用多个属性时，它现在编译为：

@include loop(whateverClassname, color, red, background-color, green, display, flex);

.whateverClassname {
  color: red ;
  background-color: green ;
  display: flex ;
}

.whateverClassname-i {
  color: red !important;
  background-color: green !important;
  display: flex !important;
}


结论：它按预期工作，不再膨胀CSS

希望我至少能帮你一点忙；-）
 我本来打算投票支持你的答案，但今天我没有票了。“我明天回来。”丹穆林说。哈哈，谢谢！不知道你的选票会用完！：'D@DanMullin. 很高兴知道。谢谢你简单的回答。这很有启发性！下面是答案，但现在我真的很好奇你的用例是什么！