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

1. 否则你可以创建一个简单的mixin

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

我的建议是创建一个mixin，它将为您提供技巧，并要求所有开发人员使用相同的。