浏览器反对状况次要浏览器根本反对，挪动端开发、混合开发、微信开发都能够思考。
什么是CSS变量？CSS变量(CSS variables)，官网称为CSS 自定义属性（CSS custom properties）。CSS变量和预处理器中的变量有什么不同？你可能曾经在CSS预处理器中尝试过应用变量而带来的益处了，比方Sass和Less。预处理器让你能设置变量，以及在函数、循环、数学计算等等中央中应用它们。这是否意味着CSS变量曾经无关紧要了呢？那可未必，次要是因为，CSS变量与预处理器中的变量其实是不同的货色。这些不同基于一个事实：CSS变量是浏览器中间接可用的CSS属性，而预处理中的变量是用于编译成惯例的CSS代码，浏览器其实对它们无所不知。这意味着，你能够在样式表中，在内联款式中，在SVG的标签中间接更新CSS变量，甚至能够在运行时用JavaScript间接批改它。而你是无奈对预处理器中的变量做下面这些操作的。CSS 变量提供了 JavaScript 与 CSS 通信的一种路径。不是说你必须要在两者间做出抉择：没有什么货色限度你，你能够同时应用CSS变量和预处理变量，并享有它们各自带来的微小益处。三、CSS变量用法1、变量的申明申明变量的时候，变量名后面要加两根连词线（--）。
你可能会问，为什么抉择两根连词线（--）示意变量？因为$title-color被 Sass 用掉了，@title-color被 Less 用掉了。为了不产生抵触，官网的 CSS 变量就改用两根连词线了。变量名大小写敏感，--title-color和--Title-Color是两个不同变量。2、变量的读取var()函数用来读取变量，函数还能够应用第二个参数，示意变量的默认值。如果该变量不存在，就会应用这个默认值。
var()函数还能够用在变量的申明。变量值只能用作属性值，不能用作属性名。3、变量值的类型如果变量值是一个字符串，能够与其余字符串拼接。
如果变量值是数值，不能与数值单位间接连用。
数值与单位间接写在一起，这是有效的。必须应用calc()函数，将它们连贯。
如果变量值带有单位，就不能写成字符串。
4、作用域全局变量 :root伪类能够看做是一个全局作用域，在外面申明的变量，他上面的所有选择器都能够拿到
局部变量
CSS变量的继承(就近准则)。同一个 CSS 变量，能够在多个选择器内申明。读取的时候，优先级最高的申明失效。这与 CSS 的"层叠"（cascade）规定是统一的。
5、响应式布局CSS 是动静的，页面的任何变动，都会导致采纳的规定变动。利用这个特点，能够在响应式布局的media命令外面申明变量，使得不同的屏幕宽度有不同的变量值。
6、兼容性解决对于不反对 CSS 变量的浏览器，能够采纳上面的写法，也能够应用@support命令进行检测。
7、JavaScript 操作及与CSS变量的交互JavaScript 也能够检测浏览器是否反对 CSS 变量。
JavaScript 能够操作 CSS 变量。
JavaScript 能够将任意值存入样式表。上面是一个监听事件的例子，事件信息被存入 CSS 变量。
对 CSS 无用的信息，也能够放入 CSS 变量，这意味着，能够把款式设置写在 CSS 变量中，让 JavaScript 读取。
补充常识calc() 函数用于动静计算长度值。须要留神的是，运算符前后都须要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都能够应用calc()函数进行计算；calc()函数反对 "+", "-", "", "/" 运算；calc()函数应用规范的数学运算优先级规定；表达式中有“”和“/”时，其前后能够没有空格，但倡议留有空格。比如说“width:calc(50% + 10px)”，这样一来你就不必思考元素DIV的宽度值到底是多少，而把这个工作交由浏览器去计算。