CSS Variables TextMate Bundle

First, read about CSS Variables and why they are cool. Then come back here and finish the job...

Download the ZIP file, extract it and double-click the bundle file to install in TextMate. It also works as expected with E-TextEditor - just extract the files and copy the CSS Variables.tmbundle directory to your Bundles directory (somewhere close to C:\Documents and Settings\[USER_NAME]\Application Data\e\Bundles), then use the Reload Bundles command.

Bundle Contents


Build CSS ⌘R
The one you'd use while developing, since it retains the variables at-rule and keeps track of the replaced variables.
Freeze CSS ⌃⇧⌘F
This is the "no turning back" version of the above, because it erases its tracks upon invocation... use for deploying a clean CSS file.


CSS @variables vars⇥
Expands to the @variables at-rule where you define your variables. This should be the first at-rule in the stylesheet!
CSS var() var⇥
Expands to a single variable replacement

Get Started Now

Using the bundle is very easy - just create a new document ⌘N, switch to the CSS Language ⌃⌥⇧C and type vars... then hit the (TAB) key, and you're already on your way!

Check the sidebar for a list of what's currently included in the bundle.

Todo List

The Bundle does a couple of key things, but there's always room for improvements, so - in no particular order, this is the list of features I'd like to add, some day:



Do whatever you like with this, but please... don't hold me responsible for anything you accidentally lose while doing so, okay?

- Chriztian Steinmeier, May 2008. <chriztian [at] steinmeier [dot] dk>