2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量，这个重要的 CSS 新功能，所有主要浏览器已经都支持了
声明css变量的时候，变量名前面要加两根连词线（--）。变量名大小写敏感， --ft-size和 --Ft-size 是两个不同变量。变量的值既可以是纯数字，也可以有单位
--ft-size: 30;
--Ft-size: 30px;
var()函数用于读取变量。var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。第二个参数不处理内部的逗号或空格，都视作参数的一部分
font-size: var(--size,30px);
如果变量值是一个字符串，可以与其他字符串拼接
--size: 24px;
font-size: var(--size);
如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接
如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接
--size: 30;
font-size: calc(var(--size) * 1px);
变量存在局部变量与全局变量
.txt1 {
/* 声明一个纯数值的局部变量 */
--size: 30;
font-size: calc(var(--size) * 1px);
}
.txt2 {
/* 声明一个有单位的局部变量 */
--size: 24px;
font-size: var(--size);
}
可以使用@supports命令检测浏览器是否兼容css变量
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a',0);
if(isSupported) {
/* 这里面是支持css变量的操作 */
}else {
/* 这里面是不支持css变量的操作 */
}
JavaScript操作css变量的写法
//设置变量
document.querySelector('p').style.setProperty('--weight','bold');
//读取变量
document.querySelector('p').style.getPropertyValue('--weight');
//删除变量
document.querySelector('p').style.removeProperty('--weight');实战代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #1a7156;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 45px;
animation: hjAnimate 1s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.1s);
}
@keyframes hjAnimate {
0% {
transform: translateY(0);
}
20% {
transform: translateY(-50px);
}
40%,100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div>
<img src="huaji.png" style="--i:1">
<img src="huaji.png" style="--i:2">
<img src="huaji.png" style="--i:3">
<img src="huaji.png" style="--i:4">
<img src="huaji.png" style="--i:5">
<img src="huaji.png" style="--i:6">
</div>
</body>
</html>总结
学以致用，每日累积一点点，每天快乐一点点。
作者：技术大黍
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
