如何声明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前端学习者聚集地，欢迎初学和进阶中的小伙伴。
网友评论