变量可以被认为是存储和重用值的一种方式。使用变量的核心优势是可重用性因素——使开发人员能够重用相同的值，并且在有意义地命名时，变量可以增强代码的可读性。
我们也可以在我们的 CSS 中使用这些变量，称为 CSS 变量——这些是开发人员声明的简单变量，用于在整个页面中重用特定的 CSS 属性，无论是全局还是局部。语法很简单：指定属性，例如 - heading-size: 30px，然后使用 var() 方法使用它。
许多 Web 开发人员甚至使用SASS，一种 CSS 预处理器，它作为 CSS 的扩展并提供更多高级属性。我们可以在 SASS 中指定变量，以及常规 CSS 中不可用的各种附加功能。方法是相同的，但我们使用 $ 符号而不是两个连字符来保存变量值。
然而，由于 SASS 是一个预处理器，SASS 变量在编译时会变成普通的 CSS。因此，生成的代码中不存在 SASS 变量，因此您无法在浏览器中访问它们。与 SASS 相比，这使得在原生 CSS 中使用变量更适合开发。
另一方面，感谢 JavaScript，我们可以在浏览器中访问 CSS 变量并修改它们的值。
要正确理解 CSS 变量的好处，让我们先看看使用它们之前是什么样子的。
声明不带变量的 CSS 属性
更具体地说，我们可以在不声明 CSS 变量的情况下声明 CSS 属性。
例如在index.html：-
.home-page{
backg