从sass编译中排除颜色属性

Question

有没有一种方法可以在webpack sass编译器中从sass编译中排除颜色属性，以防止子元素中的不透明问题。 目前，它编译如下：

div { 
    background: rgba(255, 255, 255, 1); 
} 

到：

div { 
    background: white; 
} 

对不起我的英语不好:)

Answer 1

你不能阻止它。因为它是一种将颜色转换为十六进制的sass函数。

但也有一些方法来避免它

1. 您可以创建自己的RGBA功能，将这样的伎俩为您 @function rgba($r, $g, $b, $a) { @return unquote('rgba(#{$r}, #{$g}, #{$b}, #{$a})'); }

但这样做意味着有变化，如果有人正在使用rgba(hex, a)那么它会失败，如果有一个人使用像rgba(rgb(255,255,255), 1)这样的语法，那么它也会失败。所以你必须查看你的项目结构，看看所有文件中的语法如何。而且你必须提到团队单独使用rgba。

否则，您可以创建一个简单的混入

@mixin mysuper-rgba($hexcolor, $opacity) { background-color: $hexcolor; background-color: rgba($hexcolor, $opacity); }
body { @include mysuper-rgba(#11111, 0.5); }

我的建议是创建一个混合，会做的伎俩为您和问所有的开发者都使用相同的。