Quick Compile SASS with Compass + TextMate

I’ve created a tiny TextMate bundle to quickly compile SASS into CSS. The bundle uses a SASS_DIR variable unique to your project pointing to your SASS directory. Here’s how to set it up:

  1. For best results, install the SCSS + Zen bundle beforehand.
  2. Download and install the Quick Compile bundle.
  3. In your project drawer, select the “i” icon in the bottom right corner. If the icon is grayed out, you probably have a file or folder selected within the drawer. Deselect the file by clicking elsewhere inside of the drawer.
  4. Add a SASS_DIR shell variable. The value should be the path to your SASS folder relative to your project root.
    Note: on a default compass generated project, the relative path is your project root. The SASS_DIR value should be “.”, unquoted.

That’s it. The keystroke is mapped to ⌘S. It will autosave along with your usual workflow. The Compass output will appear as a tooltip, either to confirm the output or to notify you of errors. Apologies for the formatting, I don’t see a way to clean it up:

Download Compass Quick Save 1.0

del.icio.us:Quick Compile SASS with Compass + TextMatedigg:Quick Compile SASS with Compass + TextMate


  1. randible
    October 25, 2010
    3:51 pm

    You can make the ANSI color strings go away by changing the invocation of compass to:

    compass compile “$TM_PROJECT_DIRECTORY/$SASS_DIR” –boring

    Also, I had to change the command to:

    compass compile “$TM_PROJECT_DIRECTORY/$SASS_DIR”/*.scss –boring

    In order to avoid compass complaining about non-scss files in that directory.

  2. doctyper
    October 30, 2010
    10:19 am

    @randible Thanks. I updated the bundle to kill the color strings.

  3. Josh Brewer
    December 28, 2010
    6:41 pm

    Will this work with plain old SASS (I dont use Compass but this would be incredible and quite useful to auto-compile on save).

  4. ProLoser
    November 4, 2011
    2:41 pm

    Hey man, I realize this is old, but I use this version i use this modified version. This way $SASS_DIR is optional and works just dandy if you wish to work on a standalone SASS file. I tend to just drop a config.rb in my scss folder and just go to work without any project configuration of any sort.

    # runs on save; only notifies you if it raises a warning or error

    if [[ $SASS_DIR ]]; then
    compass compile “$TM_PROJECT_DIRECTORY/$SASS_DIR” –boring –no-line-comments
    compass compile –boring –no-line-comments

Post a Comment

Your email is never published nor shared. Required fields are marked *