共计 1568 个字符，预计需要花费 4 分钟才能阅读完成。
浏览器反对状况次要浏览器根本反对，挪动端开发、混合开发、微信开发都能够思考。
什么是 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 的宽度值到底是多少，而把这个工作交由浏览器去计算。
