2018-09-30 22:01:58 +00:00
---
id: 587d7dbd367417b2b2512bb4
title: Store Data with Sass Variables
challengeType: 0
2019-08-05 16:17:33 +00:00
forumTopicId: 301460
2021-01-13 02:31:00 +00:00
dashedName: store-data-with-sass-variables
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.
2020-11-27 18:02:05 +00:00
In JavaScript, variables are defined using the `let` and `const` keywords. In Sass, variables start with a `$` followed by the variable name.
2018-09-30 22:01:58 +00:00
Here are a couple examples:
2019-05-14 12:01:32 +00:00
```scss
$main-fonts: Arial, sans-serif;
$headings-color: green;
2021-02-25 17:19:24 +00:00
```
And to use the variables:
2019-05-14 12:01:32 +00:00
2021-02-25 17:19:24 +00:00
```scss
2019-05-14 12:01:32 +00:00
h1 {
font-family: $main-fonts;
color: $headings-color;
}
```
2018-09-30 22:01:58 +00:00
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.
2020-11-27 18:02:05 +00:00
# --instructions--
2021-02-25 17:19:24 +00:00
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.
2020-11-27 18:02:05 +00:00
# --hints--
2021-02-25 17:19:24 +00:00
Your code should have a Sass variable declared for `$text-color` with a value of `red` .
2020-11-27 18:02:05 +00:00
```js
2021-05-21 11:18:42 +00:00
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items.
```js
2021-05-21 11:18:42 +00:00
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
2020-11-27 18:02:05 +00:00
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Your `.blog-post` element should have a `color` of red.
```js
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Your `h2` elements should have a `color` of red.
```js
assert($('h2').css('color') == 'rgb(255, 0, 0)');
```
# --seed--
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
.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 >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-30 23:55:22 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
2019-04-30 23:55:22 +00:00
$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 >
2018-09-30 22:01:58 +00:00
```