「这是我参与11月更文挑战的第二十四天，活动详情查看：2021最后一次更文挑战」。

前言

今天要开始了一个新的项目，在搭建项目的时候，书写style的中公共变量时，发现行内样式并不能用于less公共变量，然后突然想到，既然用不了less公共变量，那为啥不可以用css的变量呢，毕竟是原生的，肯定会支持的，那我通过在 style 标签下把less变量赋值给css变量不就行了，一拍即合（我真是个小机灵鬼），故因此学习了一下CSS的变量，特此记录一下。

变量

CSS变量：由自定义属性--name和函数var()组成，通过 --name声明变量，通过var(--name)引用自定义变量。

• 声明：--变量名： 默认值

• 读取：var(--变量名)

• 类型

  • 普通：只能用作属性值不能用作属性名

  • 字符：可以与字符串进行拼接 "Hello, "var(--name)

  • 数值：使用calc()与数值单位连用 var(--width) * 10px

• 作用域

  • 范围：在当前节点块作用域及其子节点块作用域下有效

  • 优先级别：内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

/* 声明变量 */ 
:root { 
    --primary-color: #eee; 
} 
/* 使用变量 */
.body { 
    background-color: var(--primary-color); 
}

这时候你可能回想，变量有什么用处。

• 首先它可以减少样式代码的重复性，方便统一的管理，当修改某个主体色时候，不需要一个一个去修改，只需要修改一个变量就可以。

• 还可以增加样式代码的扩展性，提高样式代码的灵活性，还方便维护。

• 还可以是CSS与JS的交互变得灵活

• 修改深层次的节点样式时，不用深度遍历，只需修改变量即可

• 当然，可能同学会觉得sass和less其实早就实现了变量这一特性，为什么还要用CSS的变量，因为在某些特定场景下，sass和less并不能满足我们的需求。

好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！