Use SASS CSS preprocessor in Drupal

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.

Ruby Installation

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.