突然有一天，发现了新大陆，css还可以这么的写，预编译的道路更加的宽泛了，连w3c的标准制定协会都和sass、less 争夺了。
我个人是这么的理解：
首先现在预编译很多，我们裁判为什么会出来横插一脚，又另弄一套，功能还没有我们众所周知的sass和less强大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新css</title>
<style type="text/css">
:root{
--bg:red;
--maincol:#666;
--header-bg:#f0f0f0;
--content-bg:#fff;
--footer-bg:rgba(0,0,0,.07);
}
header{
background:var(--header-bg);
}
select{
background:var(--content-bg);
}
.box{
color:@apply --maincol;
}
</style>
</head>
<body>
<header></header>
<select></select>
<div class="box">
</div>
<footer></footer>
</body>
</html>
从上面的代码可以看出自定义属性必须放在｛｝里面
在调用自定义属性可以用var()调用
javascript对css变量的操作写法:
Const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a',0);
if(isSupported){
}else{
}
//javascript对css变量的操作写法
//1.设置变量
document.body.style.setProperty('--primary','value');
//2.读取变量
document.body.style.getPropretyValue('--primary').trim();
//3.删除变量
document.body.style.removeProperty('--primary');
了解更多的css自定义属性点击这里
https://blog.hospodarets.com/css_properties_in_depth
版权声明：本文为u010688943原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。