---
id: 5a9d7295424fe3d0e10cad14
title: Cascading CSS variables
challengeType: 0
videoUrl: ''
localeTitle: Variáveis CSS em cascata
---
## Description
Quando você cria uma variável, ela fica disponível para você usar dentro do elemento no qual você a cria. Ele também fica disponível dentro de qualquer elemento aninhado dentro dele. Esse efeito é conhecido como cascata . Por causa da cascata, as variáveis CSS são geralmente definidas no elemento : root . :root
é um seletor de pseudo-classe que combina com o elemento raiz do documento, geralmente o
elemento. Ao criar suas variáveis em :root
, elas estarão disponíveis globalmente e poderão ser acessadas de qualquer outro seletor posteriormente na folha de estilos.
## Instructions
Defina uma variável chamada --penguin-belly
no seletor :root
e dê a ela o valor de pink
. Você pode, então, ver como o valor irá cair em cascata para alterar o valor para rosa, em qualquer lugar em que a variável for usada.
## Tests
```yml
tests:
- text: 'declare a variável --penguin-belly
no :root
e atribua-a a 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
```