css 自定义属性(@apply var)

突然有一天,发现了新大陆,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

没有更多推荐了,返回首页