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.

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:

• Add scope(s) to the CSS language parser to allow for syntax colouring
• Add a Command for restoring replacements to their initial var() references
• Create a "Toggle Variable Display" command ⇧⌃V that toggles the current line between var() [a] and development [b] modes, e.g.:
  1. color: var(standardColor);
  2. color: #fff; /* var(standardColor) */
• Put the source in Subversion (or on Github if I get adventurous)

Caveats

• Since the entire value of a rule is replaced, you cannot use a variable replacement as a single value in a shorthand rule, e.g. the following won't work:

  @variables {
      borderWidth: 2px;
      borderColor: #911;
  }
  div {
      border: var(borderWidth) solid var(borderColor);
  }

  but this will:

  @variables {
      borderSettings: 2px solid #911;
  }
  
  div {
      border: var(borderSettings);
  }

• When using the Freeze CSS command, you get some whitespace for free before the first rule in the resulting file... :-)