css - CSS变量的优点和缺点是什么？

Question

我面临一个业务需求，我认为可以通过实现 CSS 变量来解决。

基本上，虽然这个元素的前端开发人员负责 CSS 实现，但设计师希望能够为网站引入不同的“主题”。

通过将一个主题替换为另一个主题，无需更改太多代码即可进行一系列更改(例如字体大小、字体颜色、边框宽度等)。

目前，我们正试图通过将组件的样式拆分到不同的 CSS 文件中来满足这一要求 - 例如一种用于布局，一种用于排版，一种用于颜色等。

但我不喜欢这种方法。这使得 CSS 非常难以维护，并且很难为一个特定组件分离出所有 CSS，这正成为一种常见的需求。

我希望引入一组标准的“变量”，这些变量可以与特定主题相关联。

CSS 将被预处理，变量将根据使用的主题交换为实际值。

这将使我们的开发人员能够最有效地组织我们的代码，同时仍然保持足够的灵 active 以根据设计师的喜好进行定制。

对此有何看法？

Answer 1

我能想到的唯一缺点是增加了必须使用或编写预处理器的复杂性，并适本地管理输出缓存以避免每个请求都通过预处理器。

当您使用新的变量语法时，您可能还会遇到编辑器中语法突出显示的一些问题，但这可能可以解决。

除此之外，我想应该都是优点。

您可能有兴趣查看 LESS :

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}