CSS变量用法笔记

CSS变量用法笔记

1、全局CSS变量的声明与引用

• 全局CSS变量的声明

  /*定义全局变量*/
  root:{
      --h: 100px;
      --w: 100px;
      --bgcolor: #4facfe;
  }
  

• 全局CSS变量的引用

  div{
      width: var(--h);
      height: var(--w);
      background-color: var(--bgcolor);
  }
  

2、局部CSS变量的声明与引用

• 局部CSS变量的声明

  span{
      --bgcolor: #4facfe;
  }
  

• 局部CSS变量的引用

  /*局部CSS变量只有在对应标签下才能生效*/
  span{
      background-color: var(--bgcolor);
  }
  

3、CSS变量在CSS变量中可以声明

• CSS变量在CSS变量中的声明

  div{
      --h: 100px;
      --w: var(--h);/*等价于--w: 100px;*/
  }
  

4、var的备用属性

• var函数的第一个参数是要替换的自定义属性的名称

• 函数的可选第二个参数用作备用值

• 如果第一个参数引用的自定义属性无效，则该函数将使用第二个值

  root:{
      --bgcolor: #4facfe;
  }
  div{
      background-color: var(--bgcolor, red);/*如果--bgcolor不存在，背景色将为红色*/
  }
  

5、CSS变量的兼容性

• CSS变量除了不兼容ie，大部分现代浏览器都支持。