---
id: 5a9d727a424fe3d0e10cad12
title: Use a custom CSS Variable
challengeType: 0
videoUrl: ''
localeTitle: Используйте настраиваемую переменную CSS
---
## Description
После создания вашей переменной вы можете присвоить ее значение другим свойствам CSS, указав имя, которое вы ему дали. фон: var (- пингвин-скин);
Это изменит фон любого элемента, на который вы нацеливаетесь, на серый, поскольку это значение переменной --penguin-skin
. Обратите внимание: стили не будут применяться, если имена переменных не будут точно совпадать.
## Instructions
Примените переменную --penguin-skin
к свойству background
--penguin-skin
penguin-top
, penguin-bottom
, right-hand
и left-hand
.
## Tests
```yml
tests:
- text: Примените переменную --penguin-skin
к свойству background
класса penguin-top
.
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
к свойству background
класса penguin-bottom
.
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
к свойству background
для right-hand
класса.
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
к свойству background
для left-hand
класса.
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
```