❤️文章内包含个人理解，如有错误请指出。 ❤️
目录
前言
定义变量
使用变量
特别注意点
字符连接
前言
使用 CSS 变量方便设计颜色等属性。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。
定义变量
变量分为全局变量和局部变量。
全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部(本身和子级)使用。
<style>
/* 定义全局变量 */
:root {
--color: red;
}
/* 定义局部变量 */
.main {
--color: blue;
}
</style>
</head>
<body>
<div class="main">
dsfsds
</div>
</body>
在:root内定义全局变量，变量定义格式为 --变量名，需要以--两个短杠开头，
使用变量
var() 函数用于插入 CSS 变量的值。
<style>
/* 定义全局变量 */
:root {
--color: red;
}
/* 定义局部变量 */
.main {
--color: blue;
color: var(--color);
}
</style>
</head>
<body>
<div class="main">
dsfsds
</div>
</body>
特别注意点
字符连接
<style>
/* 定义全局变量 */
:root {
--color: red;
/* 字符变量 */
--a: 'sad';
--b: 'dgr';
}
/* 定义局部变量 */
.main::before {
/* 连接字符 */
content: var(--a)var(--b);
--color: blue;
color: var(--color);
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
无单位计算，并添加单位。
<style>
/* 定义全局变量 */
:root {
--color: red;
/* 字符变量 */
--a: 'sad';
--b: 'dgr';
--size: 25;
}
/* 定义局部变量 */
.main::before {
/* 连接字符 */
content: var(--a)var(--b);
--color: blue;
color: var(--color);
/* 不可以直接连接px，必须双方是字符串。
需要cale计算函数才可以 */
font-size: calc(var(--size)*1px);
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
变量js互通
CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。
<style>
/* 变量的定义 --变量名 */
/* root 全局作用域 谁都可以使用
在其他类名id下定义只有自己和子级能使用*/
:root {
--color: pink;
--fs: 50;
}
</style>
<script>
//与js的关系
window.onload = function () {
var root = document.querySelector(':root');
var styles = getComputedStyle(root);
var fonts = styles.getPropertyValue('--fs') - 1;
console.log(fonts);
root.style.setProperty('--fs', 20)
}
</script>
</head>
<body>
<div class="main">
asd
</div>
</body>
可以在js中使用css变量，获取值和修改。
标签：变量,--,color,详解,var,root,css,定义 From： https://blog.51cto.com/u_15830125/5763586