2018-10-08 17:34:43 +00:00
---
id: 5a9d7295424fe3d0e10cad14
title: Cascading CSS variables
localeTitle: Variables CSS en cascada
challengeType: 0
videoUrl: ''
---
## Description
2018-10-09 19:28:15 +00:00
< section id = 'description' >
Cuando crea una variable, queda disponible para que la use dentro del elemento en el que la creó. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como < dfn > cascada< / dfn > .
Debido a la cascada, las variables CSS a menudo se definen en el elemento < dfn > : raíz< / dfn > .
< code > :root< / code > es un selector de < dfn > pseudo-clase< / dfn > que coincide con el elemento raíz del documento, generalmente el < html > elemento. Al crear sus variables en < code > :root< / code > , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
2018-10-08 17:34:43 +00:00
< / section >
## Instructions
2018-10-09 19:28:15 +00:00
< section id = 'instructions' >
Defina una variable llamada < code > --penguin-belly< / code > en el selector de < code > :root< / code > y déle el valor de < code > pink< / code > . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
2018-10-08 17:34:43 +00:00
< / section >
## Tests
< section id = 'tests' >
```yml
tests:
2018-10-09 19:28:15 +00:00
- text: 'declara la variable < code > --penguin-belly</ code > en la < code > :root</ code > y < code > --penguin-belly</ code > a < code > pink</ code > '
2018-10-08 17:34:43 +00:00
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the < code > --penguin-belly</ code > variable in the < code > :root</ code > and assign it to < code > pink</ code > .");'
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< style >
:root {
/* add code below */
/* add code above */
}
body {
background: var(--penguin-belly, #c6faf1 );
}
.penguin {
--penguin-skin: gray;
--penguin-beak: orange;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, gray);
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, gray);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}
.penguin * {
position: absolute;
}
< / style >
< div class = "penguin" >
< div class = "penguin-bottom" >
< div class = "right-hand" > < / div >
< div class = "left-hand" > < / div >
< div class = "right-feet" > < / div >
< div class = "left-feet" > < / div >
< / div >
< div class = "penguin-top" >
< div class = "right-cheek" > < / div >
< div class = "left-cheek" > < / div >
< div class = "belly" > < / div >
< div class = "right-eye" >
< div class = "sparkle" > < / div >
< / div >
< div class = "left-eye" >
< div class = "sparkle" > < / div >
< / div >
< div class = "blush-right" > < / div >
< div class = "blush-left" > < / div >
< div class = "beak-top" > < / div >
< div class = "beak-bottom" > < / div >
< / div >
< / div >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
```js
var code = ":root {--penguin-belly: pink;}"
```
< / section >
