您将如何优化此CSS？也许与SASS或变量

问题描述

我正在尝试掌握一些新的CSS概念，并且有一些想法，但我很好奇其他人如何优化此CSS代码。这是为了在gutenberg主题中实现自定义颜色。

.has-blue-background-color li a,.has-blue-background-color p,.has-blue-background-color h1,.has-blue-background-color h2,.has-blue-background-color h3,.has-blue-background-color h4,.has-blue-background-color h5,.has-blue-background-color blockquote,.has-blue-background-color blockquote p,.has-blue-background-color blockquote cite,.has-blue-background-color li,.has-green-background-color li a,.has-green-background-color p,.has-green-background-color h1,.has-green-background-color h2,.has-green-background-color h3,.has-green-background-color h4,.has-green-background-color h5,.has-green-background-color blockquote,.has-green-background-color blockquote p,.has-green-background-color blockquote cite,.has-green-background-color li {
    color: #fff;
}

解决方法

某种允许嵌套的css预处理器或postcss将对您有很大帮助。

//scss
.has {
    &-background {
        &-blue {
            &-color {
                p {...}
                li {....}
            }
        }
    }

    &-background {
        &-red {
            &-color {
                p {...}
                li {...}            
            }
        }
    }
}

最终，我什至会移动动词和沟color。只需编写更少的整体代码。尽管has-blue-background的阅读效果优于has-background-blue，但您可以节省每种颜色的书写-background。

//scss
.has {
    &-background {
        &-blue {
            p {...}
        }
        &-green {}
        &-orange {}
    }
}

&基本上是“附加”到嵌套中父类之后的任何内容。没有＆符，您就可以像在CSS中所期望的那样拥有正常的规则。

也许您甚至可以为此编写一个动态mixin，而不是为所有这些颜色编写scss，而是使用一个函数。