今天要给大家介绍的CSS冷知识是 CSS变量

如何声明CSS变量呢？

 body{ --pborder:border 1px solid; --pcolor:red； } 

1.使用 -- 声明变量，如上面代码声明了两个变量 pborder 和 pcolor。

2.变量名是对大小写敏感的。

如何使用CSS变量呢？

 <style type="text/css"> body{ --pborder:1px solid black; --pcolor:red; } .div1 { border:var(--pborder); background: var(--pcolor); height: 100px; width: 100px; font-size: 30px; } .div2 { border:var(--foo,10px solid #e1968e); background: var(--bar, #6e89ff); height: 100px; width: 100px; font-size: 30px; } </style> <div class="div1">this is div1</div> <div class="div2">this is div2</div></body>

从上面的代码执行结果可以看出：

1.使用var()函数读取变量。传入的第一个参数就是变量名。

2.var()函数还可以使用第二个参数，如果第一个参数指定的变量名不存在，就是用第二个参数作为默认值。

不同类型的变量值使用时的注意事项

1.变量值为字符串，则可以和其他字符串进行拼接，如：

--bar: 'hey';--foo: var(--bar)' you smart';

2.如果变量值是数值，则不能和其他字串拼接，如：

 --gap: 20; margin: var(--gap)px; /* 注意这是无效的 */

如果想要实现上面的功能，可以使用calc函数：

--gap: 20;margin: calc(var(--gap) * 1px);

3.如果变量值带有单位，就不能写成字符串。

/* 这是无效的！！！ */.foo { --foo: '20px'; font-size: var(--foo);}/* 这是有效的！！！ */.foo { --foo: 20px; font-size: var(--foo);}

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。这里就不再给出例子了。

兼容性检测

在浏览器中，可使用JS检测该浏览器是否支持CSS变量

var support = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);if (support) { /* supported */} else { /* 这里需要做一些兼容性处理 */}

CSS变量就说到这里啦，希望对大家日后的工作有所帮助。

PS:如果这票文章让你学到了一点知识，欢迎点赞并关注我哦，每天一点技术干货，让我陪你在大牛的路上越走越远！！！