干了这么久前端，你有注意到CSS的这个冷知识吗？

如何声明CSS变量呢？

body{

--pborder:border 1px solid;

--pcolor:red；

}

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

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

如何使用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;

}

this is div1this is div2

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

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变量就说到这里啦，希望对大家日后的工作有所帮助。

如果有正在学web前端的小伙伴，可来我们的学习扣qun哦：86772，6593里面免费送视频教程。小编也是一名从事了5年web前端开发的工程师，花了近一个月整理了一份较适合18年学习的干货，以及我这五年的工作经验，分享给每一位想学web前端的小伙伴，这里是web前端学习者聚集地，欢迎初学和进阶中的小伙伴。