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
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.
Eclipse seems to be missing highlighting for // comments in SCSS:
Is there a way I can add that?
I added *.scss files to follow the highlighting of *.css files, but the reason why I'm running into this problem is that // comments are not allowed in CSS but they are in SCSS.
//This line is not properly highlighted
/*This line is properly highlighted*/
The Eclipse Web Tools Platform CSS editor does not support SCSS.
You can use the LiClipseText plug-in to edit SCSS files.
See Eclipse Marketplace for plug-ins that support SCSS.
I am new to sass/scss and want to know how I can use sass file in my HTML project?
Do I have to first compile it into CSS with command line or anything else that compiles scss/sass runtime into css file at a time when webpage loads into browser?
So any help?
There are many options to create a Project working with SASS, but the most common is using Compass, I see you're new to it, I strongly recommend you read a Tutorial about Compass, after understanding this you should look others options to use the same SASS like working with gulp, gulp-sass, node-sass, browser-sync, and many other options to use the same Tool.
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.