Sass 变量与 CSS 自定义属性

这篇文章最初发表在我们自己的博客网站上 一探究竟 看到更多这样的帖子！

在这篇文章中

• 语境
• 真正的区别
• 不可知论方法
• 最后的想法

语境

在前端世界中，谈论 CSS 预处理器以获取一些常规 CSS 不具备的额外工具和功能是很常见的。虽然有几个预处理器选项，但根据 最近的 GitHub 统计数据 Sass 是最受欢迎的。

作为预处理器，Sass 具有许多功能，超出了在编程语言中使用变量的能力。但是，本文的目标是专门比较 Sass 变量和常规 CSS 变量。有什么区别吗？这个比那个好吗？或者至少，这两个选项之间是否存在技术差异？

真正的区别

尽管 Sass 在某些方面比常规 CSS 更灵活，但在使用变量时需要指出一点：对于 DOM 和 CSSOM，存在 CSS 自定义属性，但 Sass 变量不存在。

这意味着可以使用 JavaScript 更改 CSS 自定义属性的值，这将影响使用该值的每个属性。但是对于 Sass 变量，这根本不可能，因为 Sass 变量被编译为放置它们的 CSS 属性的纯值。

Sass 的最终产品不会包含对变量的任何引用。在示例中，$mainColor 在编译后在 CSS 上不可用。 Sass 变量不会转换为 CSS 自定义属性，它们只是转换为放置它的属性的值。因此，要更新这些属性的值，就必须使用 JavaScript 添加一个带有新值的额外类，或者直接覆盖该元素的值，这对于可维护性可能并不理想。

不可知论方法

使用 Sass 并不是使用 CSS 自定义属性的障碍。 Sass 的编译过程不会与自定义属性等 CSS 原生功能发生冲突。因此，可以将 Sass 与 CSS 自定义属性一起使用。事实上，这是推荐的路线，因为它可以实现流畅的 JavaScript-CSS 交互。

这种方法的唯一缺点是它不适用于不支持 CSS 自定义属性的已停产或过时的浏览器版本。

最后的想法

CSS 预处理器将为您提供比普通 CSS 更多的工具。这是事实，但重新审视本文开头提出的问题，可以肯定地说：风

因此，如果您打算使用 JavaScript 操作样式，这在应用明暗切换选项等实例中很常见，您应该尝试使用 CSS 自定义属性。这对我们来说效果很好。

感兴趣和我们一起工作吗？看看我们的 职业页面 如果您想成为我们团队的一员，请联系我们！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/5818/02240100