SCSS Backround Colour Not Showing Up - Please Help!

I’m completely new to HTML or CSS. Literally second day working while fallowing a tutorial from YouTube. Everything worked fine until the SCSS part. I’m working on Visial Studio Code and I have installed Sass plug-in. So I’m typing in;

body {
background: #f2f2f2;

And nothing, background is still white. I tried !important as well, did not work. Its very simple code and yet I’m not sure what’s wrong. And yes I did press save.

1 Like
try with color that is not white meybe?

I think sass plugin in VSC provides SASS/SCSS syntax support, but to make it actually work it must be compiled to css, I used prepros for local frontend projects to minimize environment setup process, there are probably VSC plugins to compile sass too. Also you can use online editor/ide like Codepen(the easiest option), Codesandbox etc

As suggested the color change might be difficult to spot. Also, make sure you are linking to the compiled CSS file and not the SCSS file.

Yes of course I thought that as well, I changed colours to red, purple, yellow blue, nothing. My background still remained white.

I’m not sure how to make them linked? I think that’s the problem. I checked the main.css file and it’s empty, nothing I write on scss translates on it. I’m not sure how to fix that?

Are you talking about a VS Code extension? Is it this one Live Sass Compiler?

Just as an aside, I wouldn’t suggest learning SASS/SCSS just yet if you are just starting out. You really have no reason to learn about it as a compleat beginner and everything you need to learn first is just basic CSS.

Yes it’s Live Sass Complier.

Also I understand, but I was just fallowing a tutorial from very beginning, designing website on Adobe XD then coding it. I would really like to finish the tutorial, it’s just the scss part. Not sure what’s wrong.

It’s hard for me to know what is wrong. Here is a quick video on using it just in case.

It is possible just as with some of the other unmaintained extensions from this author (Ritwick Dey) that a forked version might work for you. Here is one such fork you can try instead. If you search for the extension in VS Code the fork is the one by “Glenn Marks”.

This is not ideal, but if you can’t get it to work and just want the CSS from the SCSS you can use a online compiler. Just copy and paste it into the CSS file.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.