css 冷知识 css变量

*** css变量的声明  **

    变量名前加两根连线词( -- )
    body{
        --foo:#000;
        --bar:#aaa；
    }
    各种值都可以放入css变量
    变量名大小写敏感

***  变量读取  ***
var()函数
    body{
        color:var(--foo);
        text-decoration-color:var(--bar)
    }
var()函数可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值
    color:var(--foo,#ccc)
var()函数也可以用在变量的声明
    body{
        --color:red;
        --font:var(--color);
    }
注意,变量名只能用作于属性值,不能用于属性名
    body{
        --side:margin-top;
        var(--side):20px; //无效！！！！！
    }

***  变量值的类型  ***
如果变量值是一个字符串,可以与其他字符串拼接
    --bar:'hello';
    --foo:var(--bar)'world';
    body:after{
        content:'--screen-category:'var(--screen-category);
    }
如果变量值是数值,不能与数值单位直接连用。
    .foo{
        --gap:20;
        margin-top:var(--gap)px; //无效！！！！！
    }
    数值与单位直接写在一起是无效的。必须使用calc()函数连接
    .foo{
        --gap:20;
        margin-top:calc(var(--gap)*1px)
    }
如果变量值带有单位,就不能写成字符串
    .foo{
        --foo:'20px';
        font-size:var(--foo); // 无效！！！！！
    }
    .foo{
        --foo:20px;
        font-size:var(--foo); //有效
    }

***  作用域  ***
同一个css变量,可以在多个选择器内声明。读取的时候,优先级最高的声明有效。
    <style>
        :root{--color:blue;}
        div{--color:green};
        #alert{--color:red};
        *{--color:var(--color)}
    </style>    
    <p>蓝色</p>
    <div>绿色</div>
    <div id="alert">红色</div>

***  响应式布局  ***
可以在响应式布局的media命令里面声明变量,使得不同的屏幕宽度有不同的变量值
    body{
        --primary:#aaa;
        --secondary:#bbb;
    }
    a{
        color:var(--primary);
        text-decoration-color:var(--secondary);
    }
    @media screen and (min-widthL768px){
        body{
            --primary:#ccc;
            --secondary:#ddd;
        }
    }

***  兼容处理  ***
对于不支持css变量的浏览器,可以采用下面的写法
    a{
        color:#111;
        color:var(--primary)
    }    
也可以使用 @support 命令进行检测
    @supports((--a:0)){
        /*supported*/
    }
    @supports(not(--a:0)){
        /*not supported*/
    }

***  JS操作  ***
js也可以检测浏览器是否支持css变量
    const isSupported=
        window.css &&
        window.css.supports &&
        window.css.supports('--a',0)
    if(isSupported){
        /* supported */
    }else{
        /* not supported */
    }
js操作css变量的写法
    //设置变量
    document.body.style.setProperty('--primary','#aaa');
    //读取变量
    document.body.style.getPropertyVlaue('--primary').trim();
    //删除变量
    document.body.style.removeProperty('--primary');
    eg:
    事件监听,事件信息被存入css变量
        const docStyle=document.docuemntElement.style;
        document.addEventListener('mousemove',(e)=>{
            docStyle.setProperty('--mouse-x',e.clientX);
            docStyle.setProperty('--mouse-y',e.clientY);
        })
    以下代码中,--foo的值在CSS里面是无效语句,但是可以被js读取。这意味着,可以把样式设置在CSS变量中,让js读取
    --foo:if(x>5) this.width=10;