SASS SCSS LESS compile

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

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 ?

Compilers

1. COMPASS

Compass is a powerfull command line compiler

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

Link : http://compass-style.org/help/documentation/command-line/

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
Example:
http_path = "/"
css_dir = "."
sass_dir = "."
images_dir = "../images"
javascripts_dir = "../js"

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

 

Link : https://www.jetbrains.com/help/phpstorm/2016.1/working-with-sass-and-scss-in-compass-projects.html

 

 

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.