---
id: 5a9d727a424fe3d0e10cad12
title: Use a custom CSS Variable
challengeType: 0
videoUrl: ''
localeTitle: 使用自定义CSS变量
---
## Description
创建变量后,可以通过引用您提供的名称将其值分配给其他CSS属性。 背景:var( - penguin-skin);
这会将您要定位的任何元素的背景更改为灰色,因为这是--penguin-skin
变量的值。请注意,除非变量名称完全匹配,否则不会应用样式。
## Instructions
将--penguin-skin
变量应用于penguin-top
, penguin-bottom
, right-hand
和left-hand
类的background
属性。
## Tests
```yml
tests:
- text: 将--penguin-skin
变量应用于penguin-top
类的background
属性。
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the --penguin-skin
variable to the background
property of the penguin-top
class.");'
- text: 将--penguin-skin
变量应用于penguin-bottom
类的background
属性。
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), "Apply the --penguin-skin
variable to the background
property of the penguin-bottom
class.");'
- text: 将--penguin-skin
变量应用于right-hand
类的background
属性。
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), "Apply the --penguin-skin
variable to the background
property of the right-hand
class.");'
- text: 将--penguin-skin
变量应用于left-hand
类的background
属性。
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), "Apply the --penguin-skin
variable to the background
property of the left-hand
class.");'
```
## Challenge Seed
## Solution
```js
// solution required
```