3.0 KiB
3.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7dbd367417b2b2512bb4 | Store Data with Sass Variables | 0 | Almacenar datos con variables Sass |
Description
let
y const
. En Sass, las variables comienzan con $
seguido del nombre de la variable. Aqui hay un par de ejemplos: $ main-fonts: Arial, sans-serif;Un ejemplo en el que las variables son útiles es cuando varios elementos deben ser del mismo color. Si se cambia ese color, el único lugar para editar el código es el valor variable.
$ encabezados-color: verde;
// Para utilizar variables:
h1 {
familia de fuentes: $ main-fonts;
color: $ encabezados-color;
}
Instructions
$text-color
y configúrala en rojo. Luego cambie el valor de la propiedad de color
para .blog-post
y h2
a la variable $text-color
. Tests
tests:
- text: Su código debe tener una variable Sass declarada para <code>$text-color</code> con un valor de rojo.
testString: 'assert(code.match(/\$text-color:\s*?red;/g), "Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.");'
- text: Su código debe usar la variable <code>$text-color</code> para cambiar el <code>color</code> de los elementos <code>.blog-post</code> y <code>h2</code> .
testString: 'assert(code.match(/color:\s*?\$text-color;/g), "Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.");'
- text: Tu elemento <code>.blog-post</code> debe tener un color rojo.
testString: 'assert($(".blog-post").css("color") == "rgb(255, 0, 0)", "Your <code>.blog-post</code> element should have a </code>color</code> of red.");'
- text: Tus elementos <code>h2</code> deben tener un color rojo.
testString: 'assert($("h2").css("color") == "rgb(255, 0, 0)", "Your <code>h2</code> elements should have a </code>color</code> of red.");'
Challenge Seed
<style type='text/sass'>
.header{
text-align: center;
}
.blog-post, h2 {
color: red;
}
</style>
<h1 class="header">Learn Sass</h1>
<div class="blog-post">
<h2>Some random title</h2>
<p>This is a paragraph with some random text in it</p>
</div>
<div class="blog-post">
<h2>Header #2</h2>
<p>Here is some more random text.</p>
</div>
<div class="blog-post">
<h2>Here is another header</h2>
<p>Even more random text within a paragraph</p>
</div>
Solution
// solution required