Commands for generating CSS from a group of Sass files
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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.


In the terminal, navigate to your Bundles folder:

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

Then, git it:

git clone git:// "Sass Generator.tmbundle"

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

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

Example File Structure

`-- 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.).