CSS之变量

294 阅读2分钟

「这是我参与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的交互变得灵活

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

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

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