❤️文章内包含个人理解，如有错误请指出。 ❤️
往期文章
轮播图swiper框架的基本使用 【Transform3D】转换详解（看完就会） 【css动画】移动的小车
【CSS3】 float浮动与position定位常见问题（个人笔记）
如何完成响应式布局，有几种方法？看这个就够了
详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）
[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）
目录
前言
定义变量
使用变量
特别注意点
字符连接
无单位计算，并添加单位。
变量js互通
前言
使用 CSS 变量方便设计颜色等属性。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。
定义变量
变量分为全局变量和局部变量。
全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部(本身和子级)使用。
代码语言：javascript复制 <style>
/* 定义全局变量 */
:root {
--color: red;
}
/* 定义局部变量 */
.main {
--color: blue;
}
</style>
</head>
<body>
<div class="main">
dsfsds
</div>
</body>在:root内定义全局变量，变量定义格式为 --变量名，需要以--两个短杠开头，
使用变量
var() 函数用于插入 CSS 变量的值。
代码语言：javascript复制 <style>
/* 定义全局变量 */
:root {
--color: red;
}
/* 定义局部变量 */
.main {
--color: blue;
color: var(--color);
}
</style>
</head>
<body>
<div class="main">
dsfsds
</div>
</body>
特别注意点
字符连接
代码语言：javascript复制 <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>
无单位计算，并添加单位。
代码语言：javascript复制 <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 来修改变量，以及基于媒体查询来修改变量。
代码语言：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变量，获取值和修改。
