什么是CSS变量
CSS变量，也叫做自定义属性，是一种可以存储任意值的容器。与JavaScript的变量很相似，CSS变量的值也可以被修改，但是只能在CSS中使用。通过CSS变量，我们可以在样式表中指定一些值，然后在全局的样式中使用这些值，从而减少代码的重复性。
在 CSS 中声明一个变量使用两个连字符，变量名放在 -- 里面，比如这样：
:root {
--primary-color: #000000;
--secondary-color: #ffffff;
}
在这个例子中，我们在根元素里定义了两个变量，它们的名字分别是 primary-color 和 secondary-color。然后在我们的CSS中就可以使用这些变量了，比如：
h1 {
color: var(--primary-color);
}
这样一来，这个 h1 元素的颜色就会是我们定义的 黑色。
CSS变量怎么工作
CSS变量会在渲染时被解析，然后被替换成对应的值。当我们定义一个变量而没有给它设值时，它的默认值为 undefined。如果在使用变量时并没有被定义，那么它的值会被设为初始默认值 initial。
CSS变量的最大优点是可以动态地修改，这意味着我们可以根据特定的条件来修改样式值，然后样式会动态地更新。
如何使用内联CSS变量进行布局
除了可以在样式表中声明一个全局的变量，我们还可以通过内联CSS的方式声明变量，这种方法可以使用在某些局部的情况下，使得我们可以更灵活地控制样式布局。
声明内联变量的语法跟在CSS中声明变量的语法是一致的，只不过我们需要使用 style 属性把定义写在HTML元素内。比如：
<p style="--bg-color: blue; --text-color: white">This is a paragraph.</p>
在这个例子中，我们在这个段落元素中定义了两个变量，它们的名称分别为 bg-color 和 text-color。
在此之后，就可以在这个元素内部使用这些变量了，比如：
p {
background-color: var(--bg-color);
color: var(--text-color);
}
这样一来，这个段落元素的背景颜色就是蓝色，文本颜色就是白色。
我们还可以将内联变量应用到特定的样式属性上。假设我们有一个按钮，我们想让它的宽度根据特定的内联变量来自适应，代码如下：
<button style="--width: 200px">Click me</button>
button {
width: var(--width);
}
这样一来，这个按钮的宽度就会自动调整为200px。
局部优先级高于全局
在内联变量和全局变量同时存在时，会优先使用内联变量。这是因为局部变量具有比全局变量更高的优先级，它们可以覆盖在全局范围内定义的变量。
使用calc()结合变量进行计算
我们还可以将计算函数 calc() 和变量一起使用，从而对样式值进行计算。比如：
p {
font-size: calc(var(--base-font-size) * 1.2);
}
在这段CSS代码中，我们用一个变量 --base-font-size 来指定字体的基础大小。然后使用 calc() 计算出字体大小的比例系数，乘以基础大小来得到新的字体大小。
结语
在这篇文章中，我们了解了CSS变量的工作原理，并学习了如何在内联样式中使用它们。CSS变量尤其适合需要动态样式的场合，但是请注意，它们可能不适合复杂的布局，因为其作用范围被限制在其所属的样式规则内。