---
id: 5a9d727a424fe3d0e10cad12
title: Use a custom CSS Variable
challengeType: 0
videoUrl: ''
localeTitle: Use una variable CSS personalizada
---
## Description
Después de crear su variable, puede asignar su valor a otras propiedades de CSS haciendo referencia al nombre que le dio. fondo: var (- piel de pingüino);
Esto cambiará el fondo de cualquier elemento que estés apuntando a gris porque ese es el valor de la variable --penguin-skin
. Tenga en cuenta que los estilos no se aplicarán a menos que los nombres de las variables coincidan exactamente.
## Instructions
Aplique la variable --penguin-skin
a la propiedad de background
de las clases penguin-top
, penguin-bottom
, right-hand
y left-hand
.
## Tests
```yml
tests:
- text: Aplique la variable --penguin-skin
a la propiedad de background
de la clase 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: Aplicar la --penguin-skin
variable al background
propiedad del penguin-bottom
la clase.
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 la variable --penguin-skin
a la propiedad de background
de la clase de la 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 la variable --penguin-skin
a la propiedad de background
de la clase de la 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
```