---
id: 5a9d7295424fe3d0e10cad14
title: Cascading CSS variables
challengeType: 0
videoUrl: ''
localeTitle: Каскадные переменные CSS
---
## Description
Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как каскадный . Из-за каскадирования переменные CSS часто определяются в корневом элементе. :root
- это селектор псевдокласса , который соответствует корневому элементу документа, обычно
элемент. Создав переменные в :root
, они будут доступны по всему миру и могут быть доступны из любого другого селектора позже в таблице стилей.
## Instructions
Определите переменную с именем --penguin-belly
в селекторе :root
и придайте ей значение pink
. Затем вы можете увидеть, как значение будет каскадно вниз, чтобы изменить значение на розовый, где бы ни была эта переменная.
## Tests
```yml
tests:
- text: 'объявите переменную --penguin-belly
в :root
и назначьте ее pink
.'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the --penguin-belly
variable in the :root
and assign it to pink
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```