I'm learning Sass and working with a live Sass compiler on my vsCode, Mac OS.
When I break my Sass code into partials it messes up my code, turns the SCSS extensions in the folder to CSS. I can go to the status bar and turn it back to SCSS but then when I make any changes on my code it turns it back to CSS and breaks it, you can see by the image below some files have the Sass icon a some have the # icon who do I stop this from happening?
Can someone please tell me how to configure it so it stops doing that?
Related
So I'm a newbie trying to learn SASS/SCSS/Bootstrap. I'm working on VSCode and installed SASS and bootstrap via npm in the terminal. All was well and I was working on this particular project for a few days until SASS stopped compiling out of the blue. I noticed that if I make changes to my main style.css sheet it will be reflected in the browser, however any changes to the scss partials and it's not compiling to the main style.css sheet.
To complicate things further, I was on the package.json file and clicked on 'Debug' where it made it worse - now there's no styling at all. The style.css sheet somehow consists of
#use "custom";
#use components/buttons;
etc etc..
and
#use sections/navbar
#sections/intro-section
etc etc...
The Live Sass Compiler is working and is 'watching'.
I have Live Sass Compiler and Live Server installed as extensions. I'd appreciate any help as I was stuck on this the whole day!
I'm new here so I wasn't allowed to upload images directly.
screenshot 1
screenshot 2
screenshot 3
Are you compiling on your local machine with VSCode using LiveSassCompiler by Glenn Marks (glenn2223.live-sass)? If you are using ritwickdey.live-sass, try swapping it for Glenn's as the latter is no longer maintained I think. Then, try appending a .bak to the style.css and style.css.map to regenerate the CSS with the compiler.
I am working with the developer console in chrome, and while working with the CSS I wonder why there are sass files loaded into the project. I am using the bulma framework and I have included the CSS file which does not have any reference to any sass file that I can see.
However it loads anyway, and it precedes inline styling aswell so its annoying.
Why is the sass files loaded and how do I prevent them from being loaded in the first place, does the browser natively support them?
I tried googling but didnt find a good answer.
ANSWER:
I am guessing it is "load sourcemaps" in the console that is the reason, so I have disabled it now.
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
I'm using Codekit to minify all my CSS via Sass. This works great but causes an issue when inspecting the code as everything appears on line 1! I use the lines as a quick way to find the code I'm looking for.
I use the Codekit plugin for Coda, which means every time I make a change to a .scss file and save, it just auto compiles the code.
I guess everyone will tell me not to compile the code until launch, in an ideal world that's great but there will ALWAYS be a need to inspect the code without once it's all been compiled.
Is there a way around this? Or is this a downside of compiled code? What processes do people go through to get to the minified code? How can I tell which .scss the change is in?
I could set it to be less compressed so it's not all on one line but I would then lose the benefits of compressing it.
These are the settings I have Codekit set to:
Codekit supports Source Maps, which will let Google Chrome show you the original code even after minification.
In your compilation settings, check the Create a source map box for SASS.
For more information, check out this Team Treehouse article (the article deals with JavaScript, but the same principle applies to CSS too) and the Codekit SASS documentation.
I've done everything said here and here.
I've changed the file extension to .sass, but my browser doesn't load the styles. Did I miss something?
Sass is a CSS pre-processor, and it seems you're using it without understanding it. Web browsers can't understand SASS code, and they won't. You need to "ask" Sass to generate the CSS browsers will use.
When Ruby and Sass are are installed, you need to:
Have a .sass file with your SASS code
Run the command sass input.sass:output.css (with some options if you want) to compile the SASS code and get a generated CSS code
Link your generated CSS file in your HTML