There are many CSS Preprocessor, SASS, LESS, Stylus, and Swith CSS. SASS and LESS is the most popular CSS Preprocessor. We can look on SASS Preprocessor What are the Advantages? and How to use?
SASS Preprocessor has these following Advantages:
- Nested syntax
- Ability to define variables & mixins
- Mathematical functions
- Import multiple files
How to install SASS Preprocessor:
SASS is built upon Ruby. By default MAC system have Ruby and you have to install Ruby in Windows.
MAC:
Open Terminal and run below the code.
sudo gem install sass
Windows:
Install Ruby, Make sure that you enabled "Add Ruby executables to your PATH". Open Command Prompt and run below the code.
gem install sass
You will get success message after complete installation in Terminal/Command Prompt.
Compile SASS files to CSS file:
MAC:
sass --watch style.scss:style.css
Windows:
sass --watch style.scss:style.css
Note: This command will work if you enable "Add Ruby executables to your PATH" while installing Ruby.