freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.md

id, title, challengeType, forumTopicId

id	title	challengeType	forumTopicId
587d7dbd367417b2b2512bb4	Store Data with Sass Variables	0	301460

Description

One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript. In JavaScript, variables are defined using the let and const keywords. In Sass, variables start with a $ followed by the variable name. Here are a couple examples:

$main-fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.

Instructions

Create a variable $text-color and set it to red. Then change the value of the color property for the .blog-post and h2 to the $text-color variable.

Tests

tests:
  - text: Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.
    testString: assert(code.match(/\$text-color:\s*?red;/g));
  - text: 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.
    testString: assert(code.match(/color:\s*?\$text-color;/g));
  - text: Your <code>.blog-post</code> element should have a </code>color</code> of red.
    testString: assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
  - text: Your <code>h2</code> elements should have a </code>color</code> of red.
    testString: assert($('h2').css('color') == 'rgb(255, 0, 0)');

Challenge Seed

<style type='text/scss'>


  .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

<style type='text/scss'>
  $text-color: red;

  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color: $text-color;
  }
</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>