Skip to content

Instantly share code, notes, and snippets.

@magnetikonline magnetikonline/README.md
Last active Oct 11, 2015

Embed
What would you like to do?
Sublime Text 2 - Sass syntax highlight and auto build on save.

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)
{
"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+):"
}
{
"build_on_save": 1,
"filename_filter": "\\.(scss)$"
}
@coderdiaz

This comment has been minimized.

Copy link

coderdiaz commented Jul 26, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.