命名规范

• 双横线加字母开头，由字母、数字、破折号和短横线组成
• 使用有意义的名称
• 使用小写字母和连接符（–primary-color）
• 为了避免与其他变量冲突，使用命名空间（–space-primary-color）

  定义

  在根元素（:root）中定义，以便全局使用

  :root {
    --primary-color: #ff0000;
    --font-size: 16px;
  }
  

  使用

  使用 var() 函数将变量包裹起来。变量可以在任何可以使用 CSS 属性值的地方使用

  .element {
    color: var(--primary-color);
    font-size: var(--font-size);
  }
  

  • 变量值是一个字符串，可以与其他字符串拼接
    • 变量值是数值，使用 calc() 函数,将变量的值乘以 1 像素
      • 变量值带有单位,不能写成字符串