CSS 变量（CSS variable）又叫做”CSS 自定义属性”（CSS custom properties），可以通过JS动态改变。
一、变量的声明
变量名前面要加两根连词线–，变量名大小写敏感。
:root { --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-color: var(----main-color); } 以上*–main-color*，–main-bg，–logo-border-color就是设置在根标签html 下的css 变量
二、var() 函数
var()函数用于读取变量。
.box { color: var(--main-color); height: var(--header-height); } var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
.box { color: var(--main-color, #000); height: var(--header-height, 80px); } 三、变量值的类型
.foo { --gap: 20; margin-top: calc(var(--gap) * 1px); } 四、作用域
<style> :root {
--color: blue; } div {
--color: green; } #alert {
--color: red; } * {
color: var(--color); }
style> <p>蓝色
p> <div>绿色
div> <div id="alert">红色
div> 三个选择器都声明了–color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。
五、响应式布局
响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。
:root { --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); } body { } @media screen and (min-width: 768px) { :root { --main-color: #ffffff; --main-bg: rgb(255, 134, 255); } body { } } 六、兼容性处理
使用@support命令进行检测。
a { color: #7F583F; color: var(--primary); } @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ } 七、JavaScript 操作
// 设置变量 document.body.style.setProperty('--primary', '#7F583F'); // 读取变量 document.body.style.getPropertyValue('--primary').trim(); // '#7F583F' // 删除变量 document.body.style.removeProperty('--primary'); 阮一峰的网路日志-CSS 变量教程
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/199185.html原文链接：https://javaforall.net
