Help on Store Data with Sass Variables

HTML-CSS
1

Tell us what’s happening:
I’ve tried the solution in FCC console and its working as expected.
Then i save this code into html files, but unfortunately, after i open the html files, it doesn’t working properly and the font color doesn’t change into red.

Please help ?

Your code so far

<head>
<style type='text/sass'>
  $text-color: red;
  
  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color: $text-color;
  }
</style>
<./head>
<body>
<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>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/store-data-with-sass-variables

2

Since SASS doesn’t work with browsers immediately… usually a compiler is needed to covert the SASS into regular CSS… if you are using VS code studios I would recommend getting the live SASS compiler extension… if not there are dozens of tutorials online that tell you how to install SASS on your machine… there is also a website called sassmeister.com which has its own compiler to test out styles. good luck!

3

Hi Shaux, thanks for your answer.
So i’ve try to compile style.scss into style.css file and rewrite as follows

<head>
 <link href="style.css" rel="stylesheet" type="text/css"/>
</head>

The content of CSS files as follows:

/* Case 01: Store Data with Sass Variables */
.header {
  text-align: center;
}

.blog-post, h2 {
  color: red;
}

/*# sourceMappingURL=style.css.map */