freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md

---
id: 5a9d725e424fe3d0e10cad10
title: 使用 CSS 变量一次更改多个元素
challengeType: 0
videoUrl: 'https://scrimba.com/c/c6bDECm'
forumTopicId: 301093
---

# --description--

<dfn>CSS 变量</dfn>可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性的强大方法。

按照下面指示的来做，我们只需要改变三个值，多个样式将会同时被修改。

# --instructions--

在 `penguin` class 里，将 `black` 改为 `gray`；`gray` 改为 `white`；`yellow` 改为 `orange`。

# --hints--

`penguin` class 声明中的 `--penguin-skin` 变量值应为 `gray`。

```js
assert(
  code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
);
```

`penguin` class 声明中的 `--penguin-belly` 变量值应为 `white`。

```js
assert(
  code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
);
```

`penguin` class 声明中的 `--penguin-beak` 变量值应为 `orange`。

```js
assert(
  code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
);
```

# --solutions--