css变量详解

目录

1.css变量的写法

1.1当前页面全区的变量

1.2局部变量

2.css变量的获取和使用

3.变量值的类型

4.js操作变量

5.响应式布局

---

css变量又叫css自定义属性；大小写敏感；定义的变量只能以“--”开头；

1.css变量的写法

1.1当前页面全区的变量

:root表示根节点；定义的变量；可在当前的页面的所有选择器中访问

:root {
    --color: green;
    --font: 12px;
}

1.2局部变量

当前定义的变量只能在.box的后代元素中使用；局部变量的优先级高于全局变量

.box {
      --color: pink;
      --white: #fff;
    }

2.css变量的获取和使用

通过var去使用定义的变量

:root {
      --color: green;
    }

    .box {
      --color: pink;
      --white: #fff;
    }

    span {
      color: var(--color)
    }

    .test {
      background: var(--color);
      height: 100px;
      width: 100px;
    }

3.变量值的类型

如果变量值是一个字符串，可以与其它进行拼接；
如果变量是数值，必须使用calc()函数，将它们连接(添加单位)。

.box {
    --size: 20;
    --wdith: "200";
    margin-top: calc(var(--size) * 1px)
}

.box::before {
     content: var(--width)"px"
 }

4.js操作变量

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

5.响应式布局

尺寸大于等于768px的时候，定义不同的变量；可以是在不同设备上面使用

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}