@Variable

说明

.也称自定义属性

.使用两个短划线--开始的变量名表示

.元素在CSS中使用时，使用var()引用

.一次定义、多次使用；适合一个属性值在多处被使用；相当于定义了一个当前CSS文件内的全局变量

.优势：方便运维，特别适合全站换肤

.变量的使用经常配合计算函数 calc() 使用

全局变量

.在CSS中，使用根选择器:root声明，所有元素都可使用

:root {
    --main-color: #f40;
    --main-layout: repeat(3, 1fr);
}

.wrap {
    display: grid;
    grid-template-columns: var(--main-layout);
}

@media screen and (max-width:768px) {
    :root {
        --main-layout: 1fr;
    }
}

局部变量

.在CSS中，如果变量定义在某个选择器，则只有该选择器选中的元素和它的所有后代元素使用-局部变量

.wrap{
    --el-color: #890;
}

内联变量

.在HTML元素中，使用style定义内联CSS变量，供当前元素在CSS使用

<div style="--alpha:0">0</div>

与JS交互

.动态调整

.获取元素节点，修改其属性

let mixer = document.querySelectorAll('.mixer span');
let root = document.querySelector(':root');
console.log(root);
mixer.forEach(item => {
    item.addEventListener('click', (e) => {
        console.log(e.target.style.backgroundColor);
        root.style.setProperty('--main-color', e.target.style.backgroundColor)
    })
})