SCSS Syntax Highlighting in Sublime Text

Steps to configure SCSS Syntax Highlighting in Sublime Text:

Install Sass and Compass

$ gem install sass
Successfully installed sass-3.3.7
1 gem installed

$ gem install compass
Fetching: sass-3.2.19.gem (100%)
Successfully installed sass-3.2.19
Fetching: chunky_png-1.3.1.gem (100%)
Successfully installed chunky_png-1.3.1
Fetching: fssm-0.2.10.gem (100%)
Successfully installed fssm-0.2.10
Fetching: compass-0.12.6.gem (100%)
Successfully installed compass-0.12.6
4 gems installed

Install Sublime Text Package Control

Install Package Control via the Sublime Text console. The console is accessed via the ctrl+` shortcut or the View > Show Console menu.

Once open, paste the appropriate Python code for your version of Sublime Text into the console.

Scripts to install Sublime Text Package Control

Sublime Text 2

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Sublime Text 3

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Install the sass-textmate-bundle plugin

Package Control is driven by the Command Pallete. To open the pallete, press ctrl+shift+p (Win, Linux) or cmd+shift+p (OS X).

When the Package Control Pallete opens, type SASS and hit Enter.

Close Sublime and reopen your .scss file

From Sublime menu > View > Syntax > Open all with current extension as...

Then choose Sass

Good To Go

From now on, when you open a .scss file using subl you'll get color syntax highlighting

Building Automatically

• Consider installing the SASS-Build-SublimeText2 plugin to enable building (and compressing) scss files from Sublime
• Consider installing the SublimeOnSaveBuild plugin to automatically kickoff a build when you save changes

References

http://www.metropoliscreative.com/web-development/how-to-install-sass-an-easy-guide-for-developers/
https://sublime.wbond.net/installation#st2
https://sublime.wbond.net/docs/usage
https://github.com/nathos/sass-textmate-bundle
https://github.com/jaumefontal/SASS-Build-SublimeText2
https://github.com/alexnj/SublimeOnSaveBuild