CODEWITHSUNDEEP
cssvisual-studio-codesassgrid
Maciej
Maciej

Reputation: 59

Issue - Live complication Scss to CSS in Visual Studio Code (Background image)

I hope you're gonna be able to help me. I am using VS Code and "Live Sass Compiler" by Ritwick Dey.

I was coding a grid and tried to add a background-image in scss to seperate items. Nothing fancy actually.

Grid

For example:

 .item-2 {
                grid-area: assessTheRightTime;
                background-image: url(images/Weight\ loss.jpg);
                
            }

When I saved after I uploaded all the images, I got an error notification. So in fact the code from scss did not transfer to css sheet - and to the browser.

When I went to generated style.css and put there directly the lines of code, it worked out automatically.

*UPDATE: It works for an image with a single name like: "weight". What if an image file's name is "Weight Loss" ? Does scss requires some specific syntax? I added %20 between "Weight and Loss" and it works. Is it obligatory or is there any way around? I mean what's going on with that :)

background-image: url(images/Weight%20loss.jpg);

So how to apply properly an image name with space character ? I am confused as scss bases on css syntax.

Am I missing something ? I spent a couple of hours trying to spot the problem. Thank you in advance :)

Error notification VS Code

2nd question: Is it normal that VS Code shows tons of Errors & Warnings on CSS sheet, being aware that it's compiled from scss ? I know that CSS doesn't accept some syntax (for example square bracket) that scss generates but what's the truth?

Errors & Warnings

Thank you, Maciej

Upvotes: 0

Views: 242

Answers (1)

artikandri
artikandri

Reputation: 180

  1. I think it encountered errors because your file name has spaces. It may have something to do with the missing apostrophe. Try adding "" or '', for example url("images/Weight loss.jpg"). References: w3schools.com/cssref/pr_background-image.asp
  2. As for the second error, its probably because of the linter. What is your project's linter settings? Have you configured VSCode to lint/prettify on save? github.com/prettier/prettier-eslint

Upvotes: 0

Related Questions