Store Data with Sass Variables- please fix the bug

HTML-CSS
1

my code is correct and it is not passing the “test”…
please fix the bug so this code below can pass the test.
thanks,

Your code so far


<style type='text/sass'>
  $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>

Your browser information:

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

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

2

Yeah, this is an annoying thing to have to worry about but add a space after your colon.

They are a stickler for nice looking code.

3

did and still doesn’t pass test…

4

Don’t know what to tell you then. Cuz that was the solution that made your code work on my end.

Post your code again, and maybe we can find something else

5
$text-color: red; .header{ text-align: center; } .blog-post, h2 { color: $text-color; }
6

also the next challenge @for loop doesn’t pass test-
i’ m pretty confident it is correct…i keep reading posts were other peeps can’t get the “exact” same code to pass test…

@for $j from 1 to 6 { .text-#{$j} { font-size: 10px * $j; } }
8

randelldawson-
using chrome

10

here you go…

<style type='text/sass'>
@for $j from 1 to 6 {
.text-#{$j} {font-size: 10px*$j;}
}
</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
11

weird…it didn’t grab

Hello

Hello

Hello

Hello

Hello

12

hmmm…i keep cut and pasting all the

tags but not pasting in the window…

13

somethings not right with the p tags…i typed the open caret, letter p, and closing caret and it doesn’t show up in these windows…hmmm…??
-b

16

randelldawson- didnt work either - ctrl +f5, closing browers, etc…

here’s another one not passing…is my code correct…?? …no need to answer cuz i know it’s correct cuz the ‘window’ has all three boxes those 3 colors-black,red and blue…sooo frustrating! and weird!

thnx
barb

<style type='text/sass'>
@each $color in blue, black, red{

.#{$color}-bg {background-color:$color;}
  
}
 
  
  
  div {
    height: 200px;
    width: 200px;
  }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

// running test
Your .blue-bg class should have a background-color of blue.
Your .black-bg class should have a background-color of black.
Your .red-bg class should have a background-color of red.
// tests completed
18

it’s saying…

Uncaught SyntaxError: Unexpected token <

for the first line of code…the <style type='text/sass'>

19

i also got this…

onebox?url=https%3A%2F%2Flearn.freecodecamp.org%2Ffront-end-libraries%2Fsass%2Fuse-each-to-map-over-items-in-a-list&refresh=false&category_id=423:1 Failed to load resource: the server responded with a status of 404 ()

21

will try…

what doesn’t make sense to me is that i did the 2 previous challenges (create useables mixins and use @if and @else challenges) just before these other challenges and the “pass test” and “submit and go to next challenge” alert came up without any problems…

arghhh…

22

nope, not running any special browser extension…it’s all freecodecamp…

as of 3 days ago they are still getting peeps saying on open tickets their code is not passing…all these weird workarounds…
anyway …
glad to see it’s not just me…haha
thnx ttyl
-barb

23

ps…if u come across other peeps w this prob… this will make the code pass ‘test’.

i added alot of in-line style ie


<div class="blue-bg" style="background-color: blue"></div>
<div class="black-bg" style="background-color: black"></div>
<div class="red-bg" style="background-color: red"></div>

thnx again