前言

今天要开始了一个新的项目，在搭建项目的时候，书写 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！！！