compass sass - can I convert css to scss and scss to css parallelly? - Stack Overflow
html - Convert SCSS to CSS automatically on live server - Stack Overflow
SCSS and auto compiling into CSS
Github actions - How to compile .scss files to .css files?
Videos
It is possible, but not ideal. Your best bet is to crack open your terminal and run
Copysass-convert --from css --to scss
in the directory where your styles are located and then refactor from there. It's a pain, and not a true "conversion". It tries to nest properly, and usually gets it right, but if you're not refactoring the code and using things like mix-ins, extends, and variables, it kind of defeats the purpose of using SASS to begin with.
To automate this, you may want to use something like Guard to watch the css files for changes. You'll want to make sure you're not also watching your main style (the one that sass is compiling to), as this will put you in a never-ending loop of conversion!
Use a command for installing compass
gem install compass
Run this command. This will scan defined directory for css files and convert them to scss files.
Copysass-convert -R my_css_dir --from css --to scss
Then execute this command
compass watch
This will watch scss files for changes and convert them to css files automatically.
Use sass package instead of VSCode Extensions like Live SASS Compiler.
Why should not we use "Live SASS Compiler" VSCode extension?
- Live SASS Compiler extension is old and hasn't been updated for a while.
- Some features like
@debug,@warn,@errorwon't work, so if you are using it, you have to use thesassnpm package for that.
So, How to install the sass package?
- So simple, just run these commands.
npm install -g sass
- And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css
More information is available on the sass docs here
Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki
Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.
Install sass package:
npm install sass --save-dev
Learn more about the package and its CLI
In the package.json file's scripts section, add these:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/css"
},
Run scripts:
npm run sass-dev
// or
npm run sass-prod
What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.
The above is a very basic setup to compiling SCSS files and "watching" them for changes. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.
I used to do a lot of front end work but have been out of the game for a while and am just starting to get back into it. Years ago I remember using Node.js to watch and compile my scss files into css. What's the preferred (easiest) method these days? I'm finding a lot of different solutions online at this point and it seems there's even extensions available for VSCode that basically handle it for you.
Also... one thing I seem to be completely drawing a blank on, what's the ideal process to set this up for multiple projects? Is it even possible to set it and forget it for multiple projects or by nature, will you always have to run some code or do some button pressing while you're working to get the compiler to watch for code changes? That's one piece I just can't remember how I did it before.