本篇文章带大家了解一下CSS变量，聊聊CSS变量是怎么工作的，并介绍一下如何使用内联CSS变量，以提高灵巧布局效率，希望对大家有所帮助！
有些情况下，我需要用一种简单的方法来创建网格布局。 例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。 在本文中，我们一起探索一些用例，并思考如果实现及使用它们。【推荐学习：css视频教程】
它是怎么工作的
在深入探讨这些概念之前，首先我们来回顾一下 CSS 变量的基础知识， 我们也可以将它称为“自定义属性”。
所有主流浏览器都支持CSS变量，下面是各个浏览器的支持情况：
如果要定义CSS变量是全局变量，则需要将其添加到:root声明中（:root等效于<html>）。 如果该变量特定于组件，则可以在该组内声明中定义它。
在下面的例子中，我定义了一个全局变量--size，它用于square 元素的宽度和高度。
:root { --size: 50px; } .square { width: var(--size); height: var(--size); }
