CODEWITHSUNDEEP
sasssublimetext2
Rajat
Rajat

Reputation: 34108

Auto compile SCSS files in Sublime Text 2

Ok, here is what I want:

  1. I write .scss files, not .sass files
  2. On saving the file, I get the corresponding .css file in the same folder

Now there are plenty of SASS plugins on Sublime Text2 but none seems to provide anything beyond syntax highlighting for me.

Any suggestions on how to get auto-compiling working on Sublime Text2.

Upvotes: 7

Views: 15736

Answers (5)

Nikhil Madhamshettiwar
Nikhil Madhamshettiwar

Reputation: 299

Sass Builder is the new plugin which is available in Package Manager of sublime text. This does not require any configuration. Just write your scss and hit cmd + b to compile. Your css file will be generated in the same folder as scss.

Upvotes: 1

Vasiliy Nikolaev
Vasiliy Nikolaev

Reputation: 97

You could use SublimeOnSaveBuild plugin. And in plugin filter settings just leave .scss files! It's works for just great!

Upvotes: 3

Nathan L.
Nathan L.

Reputation: 159

I was looking for a sass/scss compiler plugin for Sublime Test, but I have my source folders separate from my css folders. So, going off the comments left on here I wrote SassBuilder that runs off a config file stored in your source folder. It has also been submitted to the Sublime Package Control repository. Once they pull the request, you can install it from there.

SassBuilder on github

Upvotes: 1

Matt York
Matt York

Reputation: 16261

I didn't find any existing plugins that did this, so here it is:

Assuming you've installed the SCSS plugin from Package Control, you can save this as Packages/User/SCSS.py. 

import sublime_plugin
import subprocess
import os
from threading import Thread

def compile(input_file):
    output_file = os.path.splitext(input_file)[0] + ".css"
    cmd = "sass '{0}':'{1}'".format(input_file, output_file)
    subprocess.call(cmd, shell=True)

class SCSS(sublime_plugin.EventListener):

    def on_post_save(self, view):
        scope = (view.syntax_name(view.sel()[0].b)).split().pop()
        if scope == "source.scss":
            input_file = view.file_name()
            t = Thread(target=compile, args=(input_file,))
            t.start()

Of course, this would be better as an official Package Control plugin with user configurable settings (where to save files, on/off, etc), but this meets your requirements and doesn't block the editor.

Upvotes: 6

dikamilo
dikamilo

Reputation: 667

You should consider to use build system instead of dedicated plugin of it. It's very simple to do.

http://docs.sublimetext.info/en/latest/file_processing/build_systems.html

Something like this:

{
  "cmd": ["sass","$file"],
  "selector": "source.scss",
  "path": "/usr/local/bin"
}

And just hit ctrl + b t build current file. If you have multiple builds for scss you can select one from build menu (Tools -> Build Systems).

Upvotes: 5

Related Questions