css变量基本操作

1. html中css变量写法

<div style="--color: #ccc;">
    <span style="border: 1px solid var(--color);">
</div>

<ul>
    <li style="--i:1"></li>
    <li style="--i:2"></li>
    <li style="--i:3"></li>
</ul>

2. js读写css变量

//读
box.style.getPropertyValue('--color').trim();
getComputedStyle(box).getPropertyValue('--color').trim()

//写
box.style.setProperty('--color','green');

//删除
box.style.removeProperty('--color');

3. css变量拼接和转换

3.1 如果变量都是字符串，可以直接拼接

:root{
    --text-one:'hello';
    --text-two:'world'
}
.box:after{
    content: var(--text-one)' 'var(--text-two);
}

3.2 变量和单位不能直接拼接

:root{
    --size-one:14;
}
.box{
    font-size:var(--size-one)px; /**无效**/
}

计算结果将是

font-size: 14 px; //此时root会使用默认的字体大小，而不是14px

由上可知，变量和单位直接拼接会多出一个空格，正确的拼接方式是借用calc()函数，进行计算

font-size:calc(var(--size-one)*1px);

当然，calc也可以用作CSS变量值当中

--size:calc(20px * 2) 或者 --size: 40px

3.3 利用css计算器将数值变量转换为字符串

.pie {
    --p: 25;
}
.pie:after {
    counter-reset: p var(--p);
    content: counter(p) '%';
}

4. css变量可以是任意值

css变量可以是任意值，包括任意css片段，js片段，无论是否为合法属性值，都可以

:root{
    --margin-top: calc(2vh + 20px);
    --foo: if(x > 5) this.width = 10;
}

 

 

参考： 跟我一起全面了解一下CSS变量