css变量

css3变量

1. :root申明的全局，自定义属性用--作为前缀

   :root {
     /* 表示用-redColor来表示#ffffff颜色 */
     --redColor: #ffffff
   }
   

2. var(name, value)来插入使用

   #app {
     background: var(-redColor)
   }
   

   值	描述
   name	必需。变量名（以两条破折号开头）。
   value	可选。回退值（在未找到变量时使用）。

   注释：变量名称必须以两个破折号（--）开头，且区分大小写！

修改：用JavaScript和媒体查询来修改

优点

• 可维护性：如果没有CSS变量需要手动改变大量的属性值，使用批量处理查找和替换，可能会影响其他样式规则。使用CSS变量只用改变定义时的值。
• 提高CSS可读性：可以通过变量名判断属性内容