css 自定义属性（@apply var）

最新推荐文章于 2024-08-08 14:27:26 发布

笨小子仓库

最新推荐文章于 2024-08-08 14:27:26 发布

阅读量4.5k

点赞数 1

分类专栏： css 文章标签： var3d css自定义属性 apply css预编译

本文链接：https://blog.csdn.net/u010688943/article/details/74835352

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

突然有一天，发现了新大陆，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');