CSS/SASS(SCSS) will not work on my computer over multiple browsers

HTML-CSS
1

These css questions just keep giving me issues. At first switching to chrome worked and solved my issues for 3 .css() functions inside jQuery.

I’m now on Sass and can’t complete anything. I’ve tried using chrome and firefox to no avail. I can see my code working and changing the color of the text (I’ve tested blue, purple, red, etc.)

I looked at the answer code and it was almost exactly the same as mine (they have " style type=‘text/sass’ " instead of ‘text/scss’ for mine. I tried using this and all my styling went away (assuming that’s a legacy answer).

I also tried separating my working .blog-post, h2 { . . . } to be:
.blog-post { . . . }
.h2 { . . . }

to see if it was not reading them for some grouping issue, did not work.

I have reloaded my pages on both browsers, reset my code…many times.

The only thing I haven’t tried was using a different computer, because I don’t have access to one at the moment.

I really want to learn this stuff but if every question I have goes like this I may just move on to the react part of the course -_-;

Any help would be greatly appreciated =]

Your code so far


<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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Store Data with Sass Variables

Link to the challenge:

2

have you tried with deactivating your browser extensions?

issues with colours can often be connected to a dark mode extension

1 Like
3

I forgot to try this 1 thing, because it didn’t fix or affect my other css issues. -_-;

Now I know to not overlook any single thing lol, THANK YOU!

This was really beginning to frustrate me.

Sidenote: do you know why a dark reader would affect this? shouldn’t the dark reader be on the backend for my viewing only and not affect the code that is being sent into FCC?

4

the tests are done on the client side, the extension changes the css of the page, the tests read that css, see wrong values and fail

1 Like
5

maybe you are using dark mode extension that may be the cause of it.remove it and check agai.ur code is correct

1 Like
6

I see, thanks for the simple explanation!

This is however, making me wonder if there is a better way to do these kinds of readers/extensions or the code pen app to where it can bypass these extensions (or at the very least compensate for them). Maybe make a special container that other apps etc. will ignore or something.

7

Thanks for the suggestion!

This was my issue as another user pointed out to me earlier =]

I resolved the issue almost immediately thanks to her!

Happy coding =]

8

be happy and enjoy coding bro