如何解决您将如何优化此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,而是使用一个函数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。