前言
使用 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变量，获取值和修改。
