Sublime Text 2 - Sass syntax highlight and auto build on save.

README.md

Sublime Text 2 Sass enhancements

Steps for Sass file syntax highlighting and auto build of Sass -> CSS on save. Tested under Ubuntu Linux.

Install Sass

• $ sudo apt-get install rubygems
• $ sudo gem install sass

Syntax highlighting

• $ cd ~/.config/sublime-text-2/Packages
• $ git clone -b SublimeText2 git://github.com/kuroir/SCSS.tmbundle.git SCSS
• Upon first opening of scss file under Sublime Text, goto View - Syntax - Open all with current extension as... - SCSS.

Build config

• $ cd ~/.config/sublime-text-2/Packages/User
• $ wget https://gist.github.com/magnetikonline/3847150/raw/SCSS.sublime-build
• Test scss file now builds within Sublime (Hit F7)

Build on save

• $ cd ~/.config/sublime-text-2/Packages
• $ git clone git://github.com/alexnj/SublimeOnSaveBuild.git SublimeOnSaveBuild
• $ cd SublimeOnSaveBuild
• $ wget https://gist.github.com/magnetikonline/3847150/raw/SublimeOnSaveBuild.sublime-settings
• Edit ~/.config/sublime-text-2/Packages/SublimeOnSaveBuild/SublimeOnSaveBuild.sublime-settings config key filename_filter to suit (scss files only in my case)

SCSS.sublime-build

{
	"cmd": ["sass","--stop-on-error","--trace","--line-numbers","--no-cache","--style","expanded","$file:$file_path/$file_base_name.css"],
	"selector": "source.scss",
	"file_regex": "^(.+?\\.scss):(\\d+):"
}

SublimeOnSaveBuild.sublime-settings

{
	"build_on_save": 1,
	"filename_filter": "\\.(scss)$"
}

How I can change this "filename_filter": ".(scss)$" to create a new folder with the compiled file ?