251 lines
5.3 KiB
Markdown
251 lines
5.3 KiB
Markdown
---
|
|
id: 5a9d7295424fe3d0e10cad14
|
|
title: Cascading CSS variables
|
|
challengeType: 0
|
|
videoUrl: ''
|
|
localeTitle: Variables CSS en cascada
|
|
---
|
|
|
|
## Description
|
|
<section id="description"> Cuando creas una variable, queda disponible para que la uses dentro del elemento en el que la creas. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como <dfn>cascada</dfn> . Debido a la conexión en 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 <code></code> 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 dale 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
|
|
// solution required
|
|
```
|
|
</section>
|