Home

CSS Less(ish)

This is a SublimeText 2 plugin that facilitates a very stripped down version of some functionality available in LESS csss. (http://lesscss.org on github too)

I wanted to implement a few clever ideas in LESS, without using JavaScript so that I could trace back styles to their original source file and line number for debugging/developing purposes. (eg. FireBug etc)

The solution for me was to have SublimeText handle the css smarts within the editor while leaving the file on disk as valid css. I wanted to be able to put @link="#FF0000" within my css comments then be able to type @link anywhere within my css and have SublimeText "pop in the right value" just before the file saved to disk. My IDE would have css smarts instead of JavaScript.

Ultimately this plugin compiles and applies the css smarts at the SublimeText "pre save" hook, saves the file then restores the original view (it also works when opening a saved css file). You can play with the example, tweak the plugin settings (see below) or open up a saved css file with Notepad to see what's actually happening.

CSS Variables

You can store variables within css comments using the "@" symbol and then use them within your styles...

/* @link = "#FF0000" */  
a { color: @link; }`

produces

/* @link = "#FF0000" */
a { color: #FF0000; }

 

CSS Nesting

You can nest styles within other blocks to append that selector to all children selectors.

.header [
    h1 { color:blue }
    a { color:blue }
]

produces

.header h1 { color:blue }
.header a { color:blue }

 

CSS Colours

You can use colour functions when declaring css variables including lighten, darken, saturate, and desaturate. You can pass existing variables as arguments too.

/* 
@base-colour = #336699
@link = lighten(@base-colour, 20%) 
*/  
a { color: @link; }

produces

a { color: #3d7ab7; }

 

CSS Maths

You can add and multiply numeric variables too (works with px, em or %)

/* 
@padding = 1em
@width = 10em + 2 * @padding
*/  
div { width: @width; }

produces

div { width: 12em; }

 

---

Settings

By default the process happens instantly so you don't see the compiled css, just a highlight of which areas were changed. You may wish to edit the csslessish.sublime-settings file (with /Packages/CSS-Less(ish)/) and change restore_delay from 0 to perhaps 1000 to see a delayed flash of what is being saved to disk.

Comments

This solution won't break if opened within other IDEs. Doing so will reveal that the biggest trick is that the "css smarts" are serialized (so to speak) within a single line comment at the bottom of the file. It's quite small and out of the way.

Ultimately I you had two @variables in the css each with the same value, once saved and compiled down there was no way to know which variable was which anymore. The solution was to store these variable mappings somewhere in the file.

Limitations

Since the file is "restored" ie.changed again after saving... even though it's saved, it rightly displays as unsaved with the asterix next to the file name in SublimeText. Any ideas? :)

The nesting functionality is only one level deep. Also it uses square brackets for nestings [] which is done to preserve syntax highlighting of CSS within SublimeText (using curly brackets breaks the syntax highlighting for the first nested rule block)