---
id: 5a9d727a424fe3d0e10cad12
title: Use a custom CSS Variable
challengeType: 0
videoUrl: ''
localeTitle: Use uma variável CSS personalizada
---
## Description
Depois de criar sua variável, você pode atribuir seu valor a outras propriedades CSS referenciando o nome que você deu a ela. fundo: var (- pinguim-pele);
Isso mudará o plano de fundo de qualquer elemento que você esteja direcionando para cinza porque esse é o valor da variável --penguin-skin
. Observe que os estilos não serão aplicados, a menos que os nomes das variáveis sejam uma correspondência exata.
## Instructions
Aplique a variável --penguin-skin
na propriedade background
das classes penguin-top
, penguin-bottom
, right-hand
left-hand
.
## Tests
```yml
tests:
- text: Aplique a variável --penguin-skin
na propriedade background
da classe de 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: Aplique a variável --penguin-skin
na propriedade background
da classe com 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: Aplique a variável --penguin-skin
à propriedade background
da classe à 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: Aplique a variável --penguin-skin
na propriedade background
da classe à 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
```