100秒了解CSS变量 在 100 秒内了解自定义属性或 CSS

GSS 变量或自定义属性允许您在整个样式表中复用值，它们提高了您的效率，减少了代码重复。

还有，正如你将在这个视频中看到的，用它们可以做各种很酷的玩意。

1. 我们可以在网站中定义全局变量，将它们使用在整个网站从根元素上，从双破折号开始，后面可以使用任何变量名称。在这里可以对变量设置任何有效的 CSS 值。

2. 你可以在 body 的函数中使用变量。

3. 如果你想更加安全，您可以向函数提供第二个参数作为 fallback 值。

4. 如果文本颜色未定义或无效，它将使用第二个参数值代替。

现在你可以在不同的地方使用这个变量，当你决定更改这个值时，它只需要更新一次，变量会向下传递，这意味着它可以覆盖它们的子项。如果我们有一个 car 类，并将 car 类的文本颜色变量更改为红色，这张卡的所有子项都将使用这个值，而不是使用根值颜色。这意味着我们改变整个网站的外观，只需修改全局变量的值。

这个概念特别强大，当结合 media 查询时，随着视口变小，我们可能想要减小元素之间的边距，而不是更新它。可能有数百个单独的 CSS 类，我们只是让 media 查询更改一个变量值，甚至可以使用喜欢的颜色方案，根据用户的设备偏好，以在浅色和深色主题之间切换。

变量也适用于 CSS，将一定义为正则数，然后用它来计算其他样式中的实际项。

另外一件很酷的事情，你不仅限于一个属性值中的单个变量，注意我是如何建立一个红色、绿色和蓝色。使用这三个不同颜色的变量，让 CSS 变量对于构建主题非常有用。因为当我们使用 javascript 引入等式的判断时，我们可以及时改变这些颜色变量。

在屏幕上看到浏览器将自动重新绘制用户的样式，确保点击喜欢按钮，并与您的朋友分享此视频，它真的有助于这些短视频。

感谢收看，我们下期再见。