css变量能帮助我们干什么在一些命令式编程语言中，像java、c++亦或是javascript，通过变量我们能够跟踪某些状态。变量是一种符号，关联着一个特定的值，变量的值能随着时间的推移而改变。
在像css这种声明式语言中，随着时间而改变的值并不存在，也就没有所谓变量的概念了。
css 引入了一种层级变量的概念，从而能够从容应对可维护性的挑战。这就会使得在整个 css tree 中都可以象征性的引用一个变量一、什么是css变量css 变量当前有两种形式：
变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
自定义属性。这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量
二、变量的声明变量的命名变量声明使用两根连词线--表示变量，$color是属于sass的语法，@color是属于less的语法，为避免冲突css原生变量使用--）
注意: 变量名大小写敏感，--header-color和--header-color是两个不同变量
声明方式css变量声明的方式非常简单，如下，声明了一个名叫color的css变量。
在css文件中写
写在html标签的inline-style里
用js给某个元素声明，方法.style.setproperty
body{ --color: red;}<body style="--color: red;"></body>document.getelementsbytagname('body')[0].style.setproperty('--color', 'red')
变量值的类型如果变量值是一个字符串，可以与其他字符串拼接
--bar: 'hello';--foo: var(--bar)' world';body:after { content: '--screen-category : 'var(--screen-category);}
如果变量值是数值，不能与数值单位直接连用,必须使用calc()函数，将它们连接
.foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px;}.foo { --gap: 20; margin-top: calc(var(--gap) * 1px);}
如果变量值带有单位，就不能写成字符串
/* 无效 */.foo { --foo: '20px'; font-size: var(--foo);}/* 有效 */.foo { --foo: 20px; font-size: var(--foo);
注意: 变量值只能用作属性值，不能用作属性名
.foo { --side: margin-top; /* 无效 */ var(--side): 20px;}
上面代码中，变量--side用作属性名，这是无效的
三、css变量的继承&作用域自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素
class="one"> <p class="two"> <p class="three"> </p> <p class="four"> </p> <p></p>
定义下面的css：
.two { --test: 10px; }.three { --test: 2em; }
在这个例子中，var(--test)的结果是：
class="two" 对应的节点: 10px
class="three" 对应的节点: element: 2em
class="four" 对应的节点: 10px (inherited from its parent)
class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值
最顶层的作用域就是:root
四、响应式p { --color: #7f583f; --bg: #f7efd2;}.mediabox { color: var(--color); background: var(--bg);}@media screen and (min-width: 768px) { body { --color: #f7efd2; --bg: #7f583f; }}
五、与预处理器的不同1、预处理器变量不是实时的
$color:#7f583f;@media screen and (min-width: 768px) { $color: #f7efd2;}.mediabox { background: $color;}
编译结果
.mediabox { background: #7f583f; }
2、预处理器不能限定作用域
$zcolor:blue;.ulbox { $zcolor:red;}ul{ color: $zcolor;}
编译为
ul { color: blue; }
3、预处理器变量不可互操作
原生的css自定义属性可以与任何css预处理器或纯css文件一起使用
六、js操作变量css 变量可以和 js 互相交互
:root{ --testmargin:70px;}// 读取var root = getcomputedstyle(document.documentelement);var cssvariable1 = root.getpropertyvalue('--testmargin').trim();console.log(cssvariable1); // '70px' // 写入document.documentelement.style.setproperty('--testmargin', '100px');var cssvariable2 = root.getpropertyvalue('--testmargin').trim();console.log(cssvariable2); // '100px'// 删除document.documentelement.style.removeproperty('--testmargin');var cssvariable3 = root.getpropertyvalue('--testmargin').trim();console.log(cssvariable3); // '70px'
七、兼容性检测浏览器是否支持css自定义属性的方法
/*css*/@supports ( (--a: 0)) { /* supported */}@supports ( not (--a: 0)) { /* not supported */}// jsif (window.css && window.css.supports && window.css.supports('--a', 0)) { alert('css properties are supported');} else { alert('css properties are not supported');}
总结相较于传统的 less 、sass 等预处理器变量，css 变量的优点在于:
css 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后无法更改
css 变量能够继承，能够组合使用，具有作用域
配合 javascript 使用，可以方便的从 js 中读/写
相关文章：
php的学习--可变变量，--可变变量
php 学习日志- 变量作用域，变量
相关视频：
极客学院css及css3视频教程
以上就是什么是css变量？css变量的学习：css变量的继承&作用域的详细内容。