Sass Generator

This TextMate bundle allows you to easily generate CSS files from a folder of Sass files.

There are four commands included:

• Generate Packed CSS (cmd-r)
• Generate Packed CSS and refresh Firefox (cmd-shift-r)
• Generate CSS (cmd-opt-r)
• Generate CSS and refresh Firefox (cmd-opt-shift-r)

NEW: The 'packed' versions of the commands use Rainpress to minify/optimize the CSS.

Installation

In the terminal, navigate to your Bundles folder:

cd ~/Library/Application\ Support/TextMate/Bundles/

Then, git it:

git clone git://github.com/postpostmodern/sass-generator-tmbundle.git "Sass Generator.tmbundle"

Finally, if TextMate is already running, reload your bundles:

osascript -e 'tell app "TextMate" to reload bundles'

Example File Structure

TM_PROJECT_DIRECTORY
`-- public
    |-- contact.cfm
    |-- contact_process.cfm
    |-- contact_thanks.cfm
    |-- copyright.cfm
    |-- css
    |   |-- all.css
    |   |-- ie.css
    |   |-- print.css
    |   |-- screen.css
    |   `-- sass
    |       |-- all.sass
    |       |-- ie.sass
    |       |-- print.sass
    |       |-- screen.sass
    |       |-- site
    |       |   |-- asides.sass
    |       |   |-- colors.sass
    |       |   |-- content.sass
    |       |   |-- global.sass
    |       |   |-- header.sass
    |       |   |-- ie.sass
    |       |   `-- nav.sass
    |       `-- standard
    |           |-- reset.sass
    |           `-- default.sass
    |-- img
    |-- index.html
    `-- js

How It Works

When editing a Sass file, hitting cmd-r will cause TextMate to walk up the directory tree until it finds the sass/ directory. It will convert each file in the sass/ dir to CSS and place the resulting .css files in the parent directory of the sass/ dir (usually css/). It will not drill down into the subdirs of sass/. Those subdirs (e.g. site/ and standard/) should contain files that are included in the main Sass files (all.sass, print.sass, etc.).