---
id: 5a9d725e424fe3d0e10cad10
challengeType: 0
videoUrl: 'https://scrimba.com/c/c6bDECm'
forumTopicId: 301093
title: 使用 CSS 变量一次更改多个元素
---
## Description
CSS 变量是一种仅更改一个值,来一次性更改多个 CSS 样式属性的强大方法。
按照下面指示的来做,我们只需要改变三个值,多个样式将会同时被修改。
## Instructions
在penguin
class 里,将black
改为gray
,gray
改为white
,yellow
改为orange
。
## Tests
```yml
tests:
- text: 'penguin
class 声明的--penguin-skin
变量的值应为gray
。'
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
- text: 'penguin
class 声明的--penguin-belly
变量的值应为white
。'
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
- text: 'penguin
class 声明的--penguin-beak
变量的值应为orange
。'
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));
```
## Challenge Seed
## Solution
```js
// solution required
```