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.
Btw The file path is correct
*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
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
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
Related
I am using Visual Studio Code for a pure HTML, JavaScript and CSS project. I imported a CSS file from an old project that was provided to me by a colleague and a few of the lines in the CSS file are marked as having an error in VS Code, such as this one:
.some-class .some-sub-class {
padding-left: calc(~"50px + .75rem");
}
VS Code notes two errors here:
) expected (squiggly line under the tilde)
at-rule or selector expected (squiggly line under the closing bracket)
I was able to determine that both errors were caused by the tilde ~ character, since removing it suppresses the errors, but I need the tilde for those CSS rules.
The file is just a .css file if that's relevant, and simply closing it doesn't show any error anymore.
Is there an extension I should add, remove, or configure to make that error go away?
here are the extensions I have installed so far. The issue was happening before I installed any of them:
This is not valid CSS format, this seems to be LessCSS, which means you'd have to select proper filetype: Less.
I have been experiencing this issue for a long time. I have a lot of projects with pure html/css/js. in my css file there are a lot of codes in which i have written to get an image from directories. but the problem is that the image does not exist. For example:
.bg-img {
background-image: url("./../img/foo.jpg");
}
in this example foo.jpg does not exist in this directory. but i did not use .bg-img class in html. So this did not caused any problem as i was not using it. But while converting this to React i noticed that React has stricter rules and caused problems with compiling.
So is there any way that i can make react neglect/miss these problems and continue compiling.
By the way, the reason why i have these unnecessary css codes causing problems is that i have copy pasted from another template's css codes and did not removed them as there was a bunch more of them.
So Please don't respond me like: "remove unnecessary css codes"
Thank you for your response :).
Are you using strict mode in React? https://reactjs.org/docs/strict-mode.html Another thing - you should probably simply remove the styles you don't use :) it will help with your warnings/errors as well ;)
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
I fought this issue for several hours today, and thought I would share the issue and solution. The solution could help for a few searches:
Why is the first selector in my CSS file ignored by browsers?
Why is the first line in my CSS file ignored by browsers?
Why is the universal selector ignored by browsers?
I didn't believe I had touched the CSS for my web project, however I had been making some updates, and changing some configurations. All of the sudden, the styling was way off. With the inspector in the browser, I found that my CSS reset wasn't applied.
My CSS file begins with:
* {box-sizing:border-box;font-size:100%;line-height:1.5em;font-family:'Open Sans', sans-serif;vertical-align:baseline;word-wrap:break-word;word-break:break-word;margin:0;padding:0;border:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
I had already found that it was not the universal selector that was ignored... because if I add a line with html {}; above it, the universal selector becomes active again.
I thought it might be the first line that was ignored... so I changed html {}; to a commented line... and then the first selector on the following line no longer worked.
Somehow the CSS file had been saved beginning with a Byte Order Mark.
This was not visible in Visual Studio Code or vim, but it was subtly visible in Chrome's inspector:
That red dot as the first character of the first line is a Byte Order Mark. Editing it out in the inspector resolved the issue (for that load instance).
I'm not sure how it snuck into just one file... but it was simple to remove with vim:
Open the file in vim: vim <filename>
Remove the BOM with :set nobomb
Save and Exit: :w:q
Hope this helps someone else save some time!
Note: It may be possible that the way the file was served is the issue. It was output by Drupal using print file_get_contents();, and an extra newline may have been inserted before the BOM. Perhaps if the BOM were actually the first character, it would have been fine?
I have a website, where we are using a tool to minimize and compress css code. It is called JCH, it is a plugin for Joomla, I think you can use it on Drupal too. I have an issue this css code:
#sp-user3 .help-menu .nav.menu :not(.user-menu){
display: inline-flex;
}
It is being converted to:
#sp-user3 .help-menu .nav.menu:not(.user-menu){display:inline-flex}
As you can see ".nav.menu :not" is converted to ".nav.menu:not" which causes the css rule to not be applied as intended.
This can be an error on the tool. How can i rewrite it or add a character to avoid that confusion? any ideas are welcome.
This is indeed a bug, and this is not the first time I encountered it.
The StackSnippet editor on this site used to have the very same bug in its Tidy button. See my bug report. It was fixed soon after.
So you can file a bug report with JCH and then wait for it to be fixed as well.
Meanwhile, you can insert a * before the : in the CSS as a workaround.
:not() is a shorthand for *:not() anyway, so you won't be changing the meaning of the selector, just writing out in full what was implied.
It's a definitely tool issue, web minifiers like Minify generating correct code.
#sp-user3 .help-menu .nav.menu :not(.user-menu){display:inline-flex}