CSS 变量
最后更新于：2022-04-02 03:15:47
[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;
}
}
```
';