在CSS中使用动态变量(通过:root选择器和var())

使用场景

需要动态计算一个div(A盒子)的left值,该值为这个A盒子的自身宽度,A盒子的自身宽度根据内容变化而变化

使用方法

1. 在css中增加

:root{
  --movenum: 0;
}

在root中自定义变量:‘–movenum’

2. 在JS中

//获取root元素
const root = document.querySelector(':root');
//num为A盒子自身的宽度(通过JS计算获取),将num赋值给自定义变量 "--movenum"
root.style.setProperty('--movenum', num);

3. 在目标css中使用

.closestyle {
  left: var(--movenum);
}

原理

root里面可以声明css全局变量，变量的声明对大小写敏感，且需要在被声明的变量前加上"–",且变量只能作为属性值，不能作为属性名！
声明了css全局变量，就可以调用它，通过var()函数调用
例:

:root {
    --primary-color: #ff434f;
    --secondary-color: #e3e3e3;
    --text-color-darker: #2e2e2e;
    background-color: rgb(190, 26, 26);
}

div {
    width: 500px;
    height: 500px;
    background-color: var(--secondary-color);
}

body {
    background-color: var(--text-color-darker);
}

background-color: var(–secondary-color,#ff434f); var()也可以有第二个参数，表示默认值，如果调用的变量不存在则使用默认值。

另: var()还能定义字符串和数值

--hello:'hello';
--max:1920px;
--marigin:30px 20px 40px;