freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7dbd367417b2b2512bb4	Store Data with Sass Variables	0		Almacenar datos con variables Sass

Description

Una característica de Sass que es diferente de CSS es que utiliza variables. Se declaran y configuran para almacenar datos, de forma similar a JavaScript. En JavaScript, las variables se definen utilizando las palabras clave 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;
$ encabezados-color: verde;

// Para utilizar variables:
h1 {
familia de fuentes: $ main-fonts;
color: $ encabezados-color;
}

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.

Instructions

Crea una variable $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

3.0 KiB Raw Blame History