# 变量的声明

:root {
  --w: 100px; /* 全局变量 */
}

# 变量作用域

同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的**"层叠"**(cascade)规则是一致的。

上面提到了全局变量。

.container {
  --h: 10px;
  /* 局部变量
      只作用于拥有 .container类名的节点,
      以及该节点下的所有后辈节点。
  */
}

# var() 函数

  • 它用于读取变量
  • 可接受两个参数,第一个参数是作用域内的变量,第二个参数(可选)是第一个参数的默认值。
  • 变量值只能作为属性值。

# 变量值的类型

  • 类型
    • 字符串('hello world')不能是带单位带数字。
    • 数字。
    • 带单位的数字(1px, 30deg, ...)。
  • 运算规则
    • 字符串可以拼接。
    • 数字运算只能用calc

# 响应式布局

变量可用于@media媒体查询。

# 与sass、less区别

变量是动态的,sass、less是静态的,他们没法做到更新变量就刷新布局达到响应式的效果

# JavaScript 操作

# 其他优秀文章

小tips:了解CSS/CSS3原生变量var (opens new window)

参考链接:css变量教程 (opens new window)

Last Updated: 11/22/2019, 5:09:45 PM