I have a periodic problem when PhpStorm automatically compiles SASS into CSS files.
Sometimes it misses some letters in final CSS file.
For example after I write
body
color: #fff
I get the following CSS
body {
color: #ff;
}
Though the last character is missed. Sometimes it works as it should and compiles everything correctly. Looks like compiler saves changes to css file before SASS changes are completed or vice versa it doesn't catches all my changes in SASS file.
What could be the problem and what is possible solution?
I had the same issue. This is caused when phpstorm option to 'always' update is turned on. Whenever phpstorm detects a change it triggers the sass compiler with whatever you have in place. Sometimes it triggers before you finish writing. As far as I know the only solution is to either change to ' update on save '. Or to made a small change like a space and it will retrigger the compiler.
Related
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
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 am using Bootstrap theme in Drupal CMS.
I use Firebug to check the CSS class and HTML elements of the page.
But whenever I check, it is showing CSS class/ which is the understood, However, is there a way we can check the corresponding LESS variable?
For Example:
If we check button using firebug, the .btn CSS selector will shown font-weight: normal;,
.btn {
font-weight: normal;
}
And Corresponding LESS,
#btn-font-weight: normal;
Shortest answer: no, but if you run
lessc less/style.less css/style.css --source-map
before your watcher you'll be able to
use your inspector to see which LESS file each style comes from.
Not what you're hoping for, but it least it'll help you track things down.
The loong answer
There is no way to see .btn {font-weight: #btn-font-weight} when inspecting the compiled styles, necessarily: compiling LESS to CSS replaces the #btn-font-weight with normal.
As hinted at by #tjaart-van-der-walt, using source maps may be helpful for you. With sourc emaps, you still won't see raw LESS variables but you will be able to jump right to the LESS file where the style is defined… the right line, even. You'll still need to refer to your original file to sort out LESS-specific code, but at least you'll know exactly where to look (e.g. my-partial-less-file.less:18 rather than my-compiled-css.css:212).
So if you have a one.less
* {
background: red
}
and a two.less
* {
border: 1px solid green
}
that compile to main.css
* {
background: red;
}
* {
border: 1px solid green;
}
in the inspector you'll see something like
where before you would have seen something like
("something like" because these are Chrome screenshots.)
There are two steps to getting source maps working: 1. set up a main file (mentioning this for anyone else who reads this question; in your case this is already taken care of: less/style.less is your main file), 2. generate the source map, and 3. enable source mapping in your inspector.
1. When we get to B, it's going to be save a lot of hassle if we can just generate the source map off a single file. That requires structuring the LESS files with a main file that #imports all your other files. For example,
/styles
└─┬─ main.less
└─ components
└─┬─ one.less
└─ two.less
and main.less looks like
#import 'components/one';
#import 'components/two';
Not exactly sure what your copy of the Bootstrap Drupal theme, but in the copy I downloaded from your link it looks like the file of interest is less/style.less so you don't have to do anything here.
2. There are a bunch of ways to generate source maps while compiling LESS to CSS (there are dev apps that will do it, grunt and gulp tools, and command line tools). Since you're using using the bare command line tool Deadsimple LESS CSS Watch Compiler, let's stick with that model.
In order to run less-watch-compiler, you've already installed LESS. In case anyone else reading this hasn't, to do that you run
$ (sudo) npm install -g less
Among other things, that installed the compiler lessc, which has support for generating source maps. Run
$ lessc less/style.less css/style.css --source-map
This says "run the less compiler on less/style.less, output the compiled stylesheet to css/style.css, and generate a style.css.map sourcemap. (Full lessc documentation is here.)
(2.5 at this point you can run your less-watch-compiler less css, and follow your normal workflow)
3.
Turn on source mapping in your browser's inspector. Firebug doesn't support source mapping, but Firefox's built-in inspector does: open the inspector, right-click on any style, and select "show original sources." Mozilla's documentation is here. (Fwiw, Firebug is on track to be merged into Firefox's Developer Tools. Learn about that here.) Chrome also has built-in support: inspector --> "..." menu (top right) --> Settings --> "Sources: Enable CSS source maps" (for me, this was turned on by default), and so does Edge (documentation here; appears to be turned on by default).
While developing, despite live-reload and everything, I usually use DevTools to test the css code to apply.
Problem is, that the changes I apply are only temporary, and saving them directly to the original files with PostCSS and SASS is hard, add Angular2 and ShadowDom and I can't even find the css source file in the Source tab, figure saving in the original source scss file… Any way it would not be what I want, which is simply to log the changes I make, like for example:
p {
[…]
- font-size: 1rem;
+ font-size: 1.5rem;
[…]
}
li {
- color: #FFF;
+ color: #000;
}
Expecially thanks to the extremely annoying WebStorm's "feature" of automatically saving files every time you go out of its scope I can't tell how many times I found a solution in DevTools and then lost it when I forgot a single detail and I get mad trying to figure out what I did to manage to make it work. Also because the changes might have been applied to several elements, and I might forget to have changed one.
I tried to go through all the Chrome's extensions and I only find answers dated to 2012 suggesting to use DevTool's Source tab, that apparently doesn't even work with Angular2 and ShadowDom.
Anybody knows a solution?
Im trying to change the default font size of my h1,h2,h3 etc. by using the settings file and compiling via SASS.
I've changed the line:
$h1-font-size: rem-calc(44);
To:
$h1-font-size: rem-calc(70);
But the font size stays the same.
I've removed any other CSS to avoid conflicts. I've also checked the inspector which shows:
font-size: rem-calc(70);
But it has a strike through.
Where am I going wrong?
In Foundation, rem-calc() is a SASS function that converts pixels to REMs. If you're seeing rem-calc in your processed CSS, your SCSS file didn't get properly processed. You should see something like 1.5rem in the output CSS file.
Make you sure your SASS file is being processed. If you see other SASS functions in the output CSS file, that's an indication that it has NOT been processed. Whatever processor you're using should give you errors to indicate what part of the SASS file is problematic.