[TOC] > [参考,阮一峰](https://www.ruanyifeng.com/blog/2017/05/css-variables.html) ## 概述 变量名用`--`表示,因为`$foo`被 Sass 用掉了，`@foo`被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了 ## 变量的声明 可以把值放入`:root`中 ``` :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px); } ``` ## var() 函数 `var()`函数用于读取变量 ``` a { color: var(--foo); text-decoration-color: var(--bar); } ``` `var()`函数还可以使用第二个参数 ``` color: var(--foo, #7F583F); ``` `var()`函数还可以用在变量的声明 ``` :root { --primary-color: red; --logo-text: var(--primary-color); } ``` ## 变量值的类型 如果变量值是一个字符串，可以与其他字符串拼接 ``` --bar: 'hello'; --foo: var(--bar)' world'; ``` 如果变量值是数值，不能与数值单位直接连用,必须使用calc()函数 ``` .foo { --gap: 20; margin-top: calc(var(--gap) * 1px); } ``` ## 响应式布局 ``` 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; } } ```