SASS SCSS LESS compile | Drupal 8


Submitted by editor on Tue, 06/21/2016 - 18:24

How to compile SASS / SCSS file in to CSS ?

How to compile LESS file in to CSS ?

How to auto compile a SASS File with PhpStorm ?



Compass is a powerfull command line compiler

Install (Linux debian) : sudo apt-get install ruby-compass

Link :

2. Koala

Koala is a SASS / LESS compiler available on Windows, Linux and Mac OSX

3. WinLESS

Winless is a LESS compiler for Windows. it's free and efficient.

SCSS / LESS Configuration with PhpStorm (File Watchers)

  1. Add File Watcher (File->Settings->Tools->File Watcher->Add->SCSS)
  2. Create new scope to detect your .scss files (Ex: Select and Include Recursively the scss folder)
  3. Set Program Path (Ex: /usr/bin/scss) (Install SCSS if not already done)
  4. Set Arguments (Ex: --no-cache --update style.scss:style.css)
    -> Add other options if you want (--style compressed)
  5. Set output paths to refresh (Ex: style.css)
  6. Save and Apply


COMPASS Configuration with PhpStorm

1. Install COMPASS

2. Setup File watcher (File -> Settings -> Tools -> File Watchers)

Add new file Watcher and configure:
Example to compile a single scss file:
Program:  /usr/bin/compass
Arguments: compile $FileName$
Working Directory: $FileDir$

3 Create compass config file (config.rb) in the SCSS file directory
http_path = "/"
css_dir = "."
sass_dir = "."
images_dir = "../images"
javascripts_dir = "../js"

4. When you save the SCSS File, it will compile automatically.


Link :



Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.