• css自定义属性/css变量
• 由自定义属性标记设定值，由 var() 函数来获取值
• 属性名需要以两个减号（–）开始

---

• 全局变量：在:root伪类上定义自定义属性，可以在 HTML 文档中全局应用它

• 局部变量：在选择器中定义的变量 或 在标签中定义的变量

  • p {--color: red;
    }
    span {--color: green;
    }.p-elem {color: var(--color);
    }
    .span-elem {color: var(--color);
    }
    

  • <div class="item" style="--a: red">1<span>11111</span></div>
    <div class="item" style="--a: pink">2</div>
    <div class="item" style="--a: blue">3</div>.item {color: var(--a);
    }
    .item span{color: #fff;background-color: var(--a);
    }
    

---

变量类型：

• 如果变量值是一个字符串，可以与其他字符串拼接

  • :root {--content: 'hello';
    }
    .container-box::after {content: var(--content) 'world';
    }
    

• 如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接

  • :root {--num: 20;
    }
    .container-box::after {font-size: calc(var(--num) * 1px);
    }
    

• 如果变量值带有单位，就不能写成字符串。

  • :root {/* --str: '20px'; */--str: 20px;
    }
    .container-box::after {font-size: var(--str);
    }