258 lines
5.3 KiB
Markdown
258 lines
5.3 KiB
Markdown
---
|
|
id: 5a9d7295424fe3d0e10cad14
|
|
title: Cascading CSS variables
|
|
localeTitle: Variables CSS en cascada
|
|
challengeType: 0
|
|
videoUrl: ''
|
|
---
|
|
|
|
## Description
|
|
<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.
|
|
</section>
|
|
|
|
## Instructions
|
|
<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.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: 'declara la variable <code>--penguin-belly</code> en la <code>:root</code> y <code>--penguin-belly</code> a <code>pink</code> '.
|
|
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>
|