Store Data with Sass Variables- please fix the bug

Store Data with Sass Variables- please fix the bug
0

#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; } }

#7

What browser are you using?


#8

randelldawson-
using chrome


#9

Can you post all the code used for the Use for loop to create a sass loop challenge? You only posted a portion of it. I just want to check something. Thanks.


#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


#14

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#15

Your posted code passes with no problem and I use Chrome also. You may need to clear your cache for this page. Try Ctrl+F5, close the browser, come back in and run the tests again. If that does not work, try resetting the code and use the same code.

Let me know what happens.


#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

#17

Try checking your browser’s console for errors. To access the console, press Ctrl+Shft+J in Chrome on Windows. Clear the console window and then click Run Tests. Let me know if you see any errors show up there.


#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 ()


#20

Maybe you are running some kind of special browser extension which could be interfering with the tests? You might want to read through the current issues which have been reported on github for these sass challenges. If this issue has not already been reported there, I suggest opening a new issue with all the information you have gathered while trying to get this to work for your browser. See the link below for some possible matches.