css 变量 --*

何为css变量

• 随着各种css预编译工具sass,less,stylus的逐渐流行,css中引入变量已经成为一种趋势,因此原生(不知道能否用这个词,权当是css本身好了)css也加入了变量的定义方式

优点

• 在编写css过程中使用变量无非是希望能使用通用的样式,提高性能,降低维护成本
• 在更改样式的时候,我们可以统一修改而无需一个个的去更改样式,十分方便

语法

• css中原生变量定义是通过 --前缀来实现,后面可以自定义变量名称
• 使用方式: var(--name) ,这里的name就是自定义的变量名称
• 注意: 变量可以以数字开头,但不能包含$ [ ^ ( % 等字符,它还有一个强大之处是甚至可以直接使用中文定义变量名称
• 它也有自己的作用域,就像js中的块级作用域一样,大家自行揣摩一下它的作用方式
• 如果遇到了不合法的变量,css会自动使用默认的值代替
• 为了防止变量未定义,可以使用默认值:var(--name,value)

实战

• 自己定义变量自己使用(这里使用了中文)

  	div {
     		--绿色:green;
     		background: var(--绿色);
      	height: 100px;
      	width: 100px;
  	}
  

  运行效果
  

• 上层定义,下层使用(这里通过 :root 伪类定义了全局css变量)

  :root {
      --红色:red;
  }
  div {
      background: var(--红色);
      height: 100px;
      width: 100px;
  }
  

  运行效果
  

• 上层和自己都定义了,会怎么显示?

  :root {
      --红色:red;
  }
  div {
      --红色:green;
      background: var(--红色);
      height: 100px;
      width: 100px;
  }
  

运行效果

可以看到自己定义的变量覆盖了全局的变量

• 默认值的使用(不定义变量,看看会有什么结果)

  div {
      background: var(--红色,yellow);
      height: 100px;
      width: 100px;
  }
  

运行效果

可以看到使用了默认的yellow

• 错误的变量内容

  div {
      --红色:20px;
      background: var(--红色,yellow);
      height: 100px;
      width: 100px;
  }
  

  运行效果…

  如你所见,一片空白.
  这是因为定义的变量不能用于background,而又因为变量确实存在,所以默认值也不会生效,只是会使用默认的缺省值来代替,也就是transparent,所以会出现空白格现象

结语

• 这个知识点是今天学习JavaScript30天练习的时候发现的,目前只能理解这么多,如果想要了解更多,烦请去参看业界大神的文章
• 对JavaScript30天练习感兴趣的可以到这个链接,它可以帮助你提升原生js能力
• JavaScript30官网
• 也可以通过git clone https://github.com/soyaine/JavaScript30.git 来直接将项目拉到本地进行练习
• 感谢阅读,如有错误,请指正