> For the complete documentation index, see [llms.txt](https://1425816423.gitbook.io/my-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1425816423.gitbook.io/my-knowledge-base/za-xiang/css/css-bian-liang.md).

# css变量

## css变量

### 声明css变量

声明一个css变量和声明一个css属性一样，只不过约定css变量名必须是以`--`开头。

```css
:root{
  --main-color: #ffffff;
  --main-bg: rgb(0, 0, 0);
}
```

css变量具有作用域的概念，同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。

```css
<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
```

上面代码中，三个选择器都声明了`--color`变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

css变量对大小写敏感，`--blue`和`--Blue`是两个不同的变量

### 使用css变量

`var()`用于读取变量，它接收两个参数，第一个参数是要读取的变量名，第二个参数是默认值，当变量未定义时使用默认值。

```css
color: var(--foo, #333);
```

第二个参数可以出现逗号或空格，这些都被视作参数的一部分。

```css
var(--font-stack, "Roboto", "Helvetica");
var(--padding-trb, 10px 5px 8px);
```

当浏览器遇到无效的css变量时，会使用默认值或继承值。

```css
:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }
```

浏览器将 `--text-color` 的值替换给了 `var(--text-color)`，但是 `16px` 并不是 [`color`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color) 的合法属性值。代换之后，该属性不会产生任何作用。浏览器会执行如下两个步骤：

1. 检查属性 color 是否为继承属性。是，但是 `<p>` 没有任何父元素定义了 color 属性。转到下一步。
2. 将该值设置为它的**默认初始值**，比如 black。

### css变量的作用

css变量适用范围非常广，下面讨论一下一些非常有用的场景。

#### 多主题

css变量可以制作多主题网站，比如网站的暗黑模式，我们将各组件的颜色存放到css变量中，如果要改变网站主题颜色只要改动css变量值就可以了。

```css
--bodyColor: #fff;
--bodyFontColor: #000;
/* 暗色模式 */
--bodyColor: #000;
--bodyFontColor: #fff;
```

通过动态的修改css变量，可以很方便地修改网站主题。

知名的跨平台移动app开发框架——Ionic就是采取这种方式实现。下面是Ionic官网文档的原话和翻译。

> Ionic components are built with [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.
>
> Ionic组件是通过css变量构建的，这使应用程序的定制变得简单。css变量允许在一个地方存储一个值，然后在其他多个地方引用。这也使得动态改变css变为可能(在过去需要借助css预处理器)，css变量让覆盖Ionic组件以匹配品牌或主题变得比以往更容易。

**可见css变量最重要的是可以在不使用css预处理器的前提下动态地修改css。**

#### 响应式

css变量可以实现响应式布局，我们看一下这个网站[Infinity 主页 (inftab.com)](https://inftab.com/)

这个网站定义了很多css变量，并且网站的很多组件都由这些变量来控制，那么这时只要改变了这些css变量就能达到改变css的目的。

![image-20211230225528320](https://raw.githubusercontent.com/const-love-365-10000/cloudImg/master/img/image-20211230225528320.png)

看css变量`--icon-box-width`，当我们拉动缩小窗口时，这个值也会跟着缩小，从而使组件也跟着缩小。

![image-20211230225602438](https://raw.githubusercontent.com/const-love-365-10000/cloudImg/master/img/image-20211230225602438.png)

### 操作css变量

#### 媒体查询

可以借助媒体查询达到修改css变量的目的。

```css
body {
    --primary: #7f583f;
}
@media screen and (min-width: 768px) {
    body {
        --primary: #f7efd2;
    }
}
body {
    background-color: var(--primary);
}
```

![image-20211230225015266](https://raw.githubusercontent.com/const-love-365-10000/cloudImg/master/img/image-20211230225015266.png)

![image-20211230225032144](https://raw.githubusercontent.com/const-love-365-10000/cloudImg/master/img/image-20211230225032144.png)

#### JavaScript操作css变量

可以通过JavaScript读取、设置和修改css变量

JavaScript 操作 CSS 变量的写法如下。

```javascript
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');
```

## 参考

[CSS 变量教程 - 阮一峰的网络日志 (ruanyifeng.com)](https://www.ruanyifeng.com/blog/2017/05/css-variables.html)

[使用CSS自定义属性（变量） - CSS（层叠样式表） | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)

[Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps (ionicframework.com)](https://ionicframework.com/docs/)