Sass support for Sublime Text 2?
SassSublimetextSass Problem Overview
Is there an existing package for editing Sass in Sublime Text 2?
This seems to be popular: https://github.com/n00ge/sublime-text-haml-sass
However, after installation, it appears that it only provides syntax highlighting for scss
files.
Ideally, I'd like syntax highlighting, indentation and completions for the sass
syntax.
Sass Solutions
Solution 1 - Sass
I'd recommend you go with this one: https://github.com/nathos/sass-textmate-bundle, if only for the amazing code completion - compatible with SASS/SCSS.
Whenever in doubt about packages, and assuming you use the amazing Sublime Package Control, just use the packages list, type something (the result will be sorted by the number of installs), and usually the most popular one is the best one.
Solution 2 - Sass
The reason it is only working for your scss files is because the Ruby HAML highlighting settings overrides your sass highlighting.
Goto Preferences
> Browse Packages...
Find and open Ruby Haml.tmLanguage
inside the Rails
folder
change the fileTypes from:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>fileTypes</key>
<array>
<string>haml</string>
<string>sass</string> <!-- This line is causing the problem -->
</array>
<key>foldingStartMarker</key>
<string>^\s*([-%#\:\.\w\=].*)\s$</string>
<key>foldingStopMarker</key>
<string>^\s*$</string>
...
to:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>fileTypes</key>
<array>
<string>haml</string>
</array>
<key>foldingStartMarker</key>
<string>^\s*([-%#\:\.\w\=].*)\s$</string>
<key>foldingStopMarker</key>
<string>^\s*$</string>
...
Now the SASS highlighting package you installed should be working properly.
Solution 3 - Sass
I did a blog post recently about this: How to Add SASS Support to Sublime Text.
Here's a quick summary:
- To get syntax highlighting, install the sass-textmate-bundle plugin, called simply
Sass
in Package Control. You'll find thatsass
files won't be properly highlighted by default, but in the post I detail a two-second fix that doesn't involve hacking up any of Sublime's default plugins. - Install the SASS Build plugin to enable building
sass
andscss
files from Sublime. - Add the SublimeOnSaveBuild plugin, which automatically runs a build whenever you save changes to a file.
Check out the blog post for full details.
Solution 4 - Sass
regarding to this article :
- install sass-textmate-bundle plugin
- open some sass file
- click View | Syntax | Open all with current extension as … | Sass
Solution 5 - Sass
If a package conflict is causing trouble ( like the Haml issue ) and you need to edit / override a package like removing the <string>sass</string>
part from the Ruby HAML
file, then I would highly recommend the Package Resource Viewer (and editor) plugin.
-
Install
PackageResourceViewer
-
Use the palette to do
PackageResourceViewer: Open Resource
:
[![][1]][1] -
Select
Rails
thenRuby Haml.tmLanguage
:
[![screen-2014-02-25_10.37.09.png][2]][2] -
Comment out the offending line:
[![screen-2014-02-25_10.39.12.png][3]][3] -
Save the file ( this is the awesome part, because the
PackageResourceViewer
automatically saves just the overridden part automatically to the correct place. -
Done.
Now go and tweak all the little settings / defaults in the other packages that have been annoying you. [1]: https://i.stack.imgur.com/5lSth.png [2]: https://i.stack.imgur.com/nl4Zp.png [3]: https://i.stack.imgur.com/gpb8r.png
Solution 6 - Sass
I ran into the problem of https://github.com/n00ge/sublime-text-haml-sass not recognizing Rails default .css.sass
files because of the extra .css
extension. I agree with Maxime above that using https://github.com/seaofclouds/sass-textmate-bundle is a better option and that installing via the package control is ideal http://wbond.net/sublime_packages/package_control. The way to fix the .css.sass extension not being recognized is to edit the Sass package directly. Go to Sublime Text 2 > Preferences > Browse Packages
and edit the Sass\Syntaxes\Sass.tmLanguage
file. Add <string>css.sass</string>
to the <array>
block.
<key>fileTypes</key>
<array>
<string>sass</string>
<string>css.sass</string>
<string>scss</string>
</array>