Sass support for Sublime Text 2?

Question

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.

score 70 · Answer 1 · edited Aug 28 '13 at 22:50

70

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.

edited Aug 28 '13 at 22:50

Sk8erPeter

6,899
9
48
67

answered Jul 04 '12 at 07:17

Maxime Fabre

2,252
3
20
24

so...how do you compile the sass files? there's no build command, and I tried pulling out the "relevant" files from the n00ge repo, but I apparently don't have "sass" installed? – drzaus Jul 20 '12 at 03:23
1

Be careful, all Sass plugins for Sublime are helpers to ease out an already working Sass environnement. They won't compile your files and don't remove the need to install Sass itself. – Maxime Fabre Jul 20 '12 at 06:57
To answer my comment-question, I ended up wrapping a [standalone SASS compiler](https://github.com/zaus/Sassifier) for Windows in .NET (see github) – drzaus Aug 01 '12 at 20:40
6

@drzaus - If you are using a Mac, I highly, highly, HIGHLY recommend CodeKit for precompiling your Sass / SCSS files. – Matt van Andel Sep 18 '12 at 19:12
@MattVanAndel, nope, Windows :). Turns out for just frontend editing, Visual Studio and/or WebMatrix 2 autocompile SASS files (via an extension), but that has nothing to do with Sublime. – drzaus Oct 15 '12 at 16:13
@MaximeFabre Worked like a charm for what I needed, Thanks! – BMB Dec 04 '12 at 09:44
3

@drzaus If you or anyone else is still interested, then [Prepros](http://alphapixels.com/prepros/) is pretty much like CodeKit for windows. + it is completely free ! – Fallup Jun 01 '13 at 14:36
Just wondering, how do you sort the SublimeText package list by the number of installs? – twiz Jul 15 '13 at 13:55

Alexander Ekdahl · Answer 2 · 2012-12-30T00:55:12.347

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.

https://github.com/elia/ruby-haml.tmbundle seems to fix this and has other improvements. — sam, Nov 03 '13 at 20:31
This is unnecessary. Just open a .sass file and use the menu option "View > Syntax > Open all with current extension as ... > Sass" as described in @bleberi's answer below. — Zach, Nov 27 '13 at 18:36
@Neverender did not know about that one. Thank you, much better solution. Also I believe my answer is quite outdated since it has been fixed in later versions of Sublime. — Alexander Ekdahl, Dec 02 '13 at 22:48

score 21 · Answer 3 · answered Apr 30 '13 at 15:08

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 that sass 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 and scss 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.

This post is brilliant. Had me set up in no time. – Moob Mar 13 '14 at 13:50 — Moob, Mar 13 '14 at 13:50

score 18 · Answer 4 · answered Sep 21 '13 at 12:32

18

regarding to this article :

install sass-textmate-bundle plugin
open some sass file
click View | Syntax | Open all with current extension as … | Sass

answered Sep 21 '13 at 12:32

blackbiron

809
10
17

Very helpful. To add on to this, the name of the plugin is just plainly "SCSS" but in the description it writes the TextMake SCSS Official Bundle. My short key for installing plugin for Mac is Command+Shift+P and search "install" for Package Control: Install Package. – Michael Shang May 03 '17 at 10:43

score 3 · Answer 5 · edited Sep 12 '19 at 21:10

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:
Select Rails then Ruby Haml.tmLanguage:
Comment out the offending line:
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.

score 2 · Answer 6 · answered Mar 12 '13 at 17:06

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>

Sass support for Sublime Text 2?

6 Answers6

Linked