Sass 使用 @content 进行操作

Question

是否可以在 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;
}

Answer 1

不，你不能。 但是我很快就给你写了一个mixin来让它工作。它还不接受多个属性。

第一个注意事项:我更改了 mixin，它现在确实接受多个属性。这是Codepen .

第二个注释:我更新了添加多个属性的 mixin，不再为每个属性 编译为不同的类>，相反，您会得到两个版本，一种没有 !important 后缀，另一种则带有。

这是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变得臃肿。

希望我至少能帮助你一点;-)