萨斯用@content操纵

Question

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

结论是，我想在@important中制作一个创建两个版本的mixin。重要的，不重要的。

输入

.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，让它发挥作用。它还不接受多个properties。

第一个注意：我更改了mixin，现在接受多个properties。这是Codepen。

第二个注意：我更新了mixin，添加了多个属性。不再编译到每个property的不同类，而是得到了两个版本，一个没有!important后缀，另一个有。

这是混合：

@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。

希望我至少能帮你一点忙；-(