css变量的使用方法

CSS变量的使用方法

在css中，变量是一种特殊的样式，可以在css中设置一个变量，之后，就可以在子元素中获取到这个值。

如何定义CSS变量

.root {
  --color: red;
}
.son {
  color: var(--color);
}

以上的代码，就是在root中定义了一个变量，变量名为--color，变量值为red。
在子元素中，可以通过var(--color)来获取这个变量的值。

CSS变量的用途

方便的管理统一的属性

这应该是最优先想到的用途了
当一些元素拥有大部分相同的值时，使用CSS变量来使其便于维护

.root {
    --color: red;
}
.son1 {
  color: var(--color);
}
.son2 {
  color: var(--color);
}

JS统一控制

使用js可以方便的获取到元素上到css变量的值，并且可以统一控制。

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

使用CSS变量的示例

当我们需要实现一个元素的样式随着滚动改变时，有时会使用JS即时计算，然后逐个改变元素的样式。
这样对于性能的消耗是非常大的。
现在，我们使用CSS变量来实现，当页面滚动时，我们只改变CSS变量的值，然后在CSS中用CSS变量来计算样式。

let navScale = 0;
let scrollProcess=document.body.scrollTop + window.innerHeight;
navScale = ( scrollProcess - this.outer_Start_Height ) /  window.innerHeight;
// 把navScale限制在0-1内
navScale = Math.min(this.max, Math.max(0, navScale));
this.$refs.stickyouter.style.setProperty('--scroll-height',navScale)

以上代码，改变了–scroll-height的CSS变量，他会在0-1之间
然后，我们在CSS中使用他

.sticky1{
    opacity: var(--scroll-height);
}
.sticky2{
    transform: translateX(calc(1000px - calc(var(--scroll-height) * 1000px)));
}

我们还可以通过计算来适应到不同的属性中。比如上面的代码中的transform

calc使用方法见 https://blog.csdn.net/qq_41636947/article/details/121459411