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 : http://compass-style.org/help/documentation/command-line/
Koala is a SASS / LESS compiler available on Windows, Linux and Mac OSX
Winless is a LESS compiler for Windows. it's free and efficient.
SCSS / LESS Configuration with PhpStorm (File Watchers)
- Add File Watcher (File->Settings->Tools->File Watcher->Add->SCSS)
- Create new scope to detect your .scss files (Ex: Select and Include Recursively the scss folder)
- Set Program Path (Ex: /usr/bin/scss) (Install SCSS if not already done)
- Set Arguments (Ex: --no-cache --update style.scss:style.css)
-> Add other options if you want (--style compressed)
- Set output paths to refresh (Ex: style.css)
- 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:
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"
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