Create a gist now

Instantly share code, notes, and snippets.

LessCSS Build System for Sublime Text 2
* Basic LessCSS Build System for Sublime Text 2
* Prerequisites: node.js, global lesscss node module
* How it works:
* 1. Create the folders "src/css" and "assets/css" in your project root
* 2. Put all your .less files into "src/css"
* 3. Open your main .less file and hit "Build"
* 4. Dance happily around your minified and compiled CSS file in "assets/css"
* 5. Profit
"cmd": ["/usr/local/bin/lessc", "-x", "$file", "${file_path}/../../assets/css/${file_base_name}.css"],
"path": "/usr/local/bin",
"selector": "source.css.less"

I did a little modification that i wanted to share with you and others.
I used yahoo's yui-compressor ( to minify the compiled CSS even further.

In case you use linux save the following bash script in a file called "compile_less" in your LESS folder

#! /bin/bash
setterm -file $1
/usr/local/bin/lessc -x $1.less $1.compiled.css
/usr/bin/java -jar /usr/share/yui-compressor/yui-compressor.jar $1.compiled.css -o $1.min.css

and execute it in your sublime build script (this way i can run multiple cmd actions in a row):

"cmd": ["/home/USER/.config/sublime-text-2/Packages/LESS/compile_less", "${file_path}/${file_base_name}"],
"path": "/usr/local/bin",
"selector": "source.css.less"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment