你会如何优化这个css？也许使用 SASS 或变量

Question

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

.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;
}

Answer 1

某种允许嵌套的 css-preprocessor 或 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 {}
    }
}

& 基本上是一个“追加”，它后面跟在该嵌套中的父 class。如果没有符号，您就可以像在 css.

中所期望的那样拥有正常的规则

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

你会如何优化这个css？也许使用 SASS 或变量

How would you optimize this css? Perhaps with SASS or variables

css

sass

wordpress-gutenberg