LESSCSS

2 weeks ago, Jonathan dropped me an IM concerning a nifty little Mac OSX app called LESS. Essentially, LESS.app is a fancy GUI for a Ruby gem called LESSCSS, a CSS parsing and authoring tool designed to speed up CSS development.

I’m not going to go into detail about it’s function, but what I will do is give a review, highlight its pros and cons and maybe even offer some mixins you can use.

Setting up

Installing LESS.app was a breeze, and being familiar with installing Ruby Gems, the command-line app LESSCSS was also swiftly installed.
My initial reasons for using LESS was to use the Mixin functionality, and create a library of common mixins I tend to use on each project. I was hoping that I could store this ‘common library’ in a central place and reference it from all my projects – this was not the case, as all LESS imports have to be sourced from the same folder.

Pros and Cons

In these 2 weeks of using LESS, I’ve noticed a few limitations – they’re not deal-breakers, but then I haven’t used LESS in a team-environment yet.

Pros:

• LESS Syntax is very similar to CSS, which makes it easier to use than SASS.
• Storing your common mixins in a separate file speeds up development on subsequent projects
• Non-invasive file monitoring means your LESS files are compiled as you save them.  No need for compiling manually.

Cons:

• No support as yet for some dynamic mixins that use proprietary properties such as Microsoft’s alpha(opacity) property
• Multiple comma-separated ancestral selectors are converted into multiple selectors, dropping the comma in the selector and repeating the rule each time over.
• Larger, more numerous imports and more complex LESS files take longer to compile.  I find I’m often refreshing my browser twice because I refreshed before the CSS was compiled.

Talking of a team-environment… everyone who touches the CSS would have to use LESS, else there’ll be some crazy merging going on when someone updates the CSS and not the source LESS files.

All that said, I’d recommend using LESS to anyone who’s working on their CSS independently.

Further exploration

The compiling side of LESS CSS must  surely be able to minify the output!  At the moment it dumps each property on a new line, leading to horrendously long CSS files with lots of whitespace.  (I’m a big fan of multiple properties per line for each selector)  I’ll see what I can find in terms of lessc options, but for now it’s not a big issue.

Momentum

After I subscribed to the LESSCSS Google Group and read through a few of the discussions, I noticed that there seems to be some momentum in the project, but not a lot.  There are plenty of new users asking questions, but not a lot of active developer feedback. (Probably because cloudhead is working on LESS.js at the moment)  Maybe that’s a call for more community involvement in the app.  If you’ve done work on Ruby gems before, why not get involved with LESS on GitHub?

As promised…

…some mixins I use already:

Cross-browser border-radius, still no IE support though

.border-radius (@radius:5px) {border-radius:@radius; -moz-border-radius:@radius; -webkit-border-radius:@radius;}
.border-radius-top-left (@radius:5px) {border-radius-top-left:@radius; -moz-border-radius-topleft:@radius; -webkit-border-top-left-radius:@radius; }
.border-radius-top-right (@radius:5px) {border-radius-top-right:@radius; -moz-border-radius-topright:@radius; -webkit-border-top-right-radius:@radius;}
.border-radius-bottom-left (@radius:5px) {border-radius-bottom-left:@radius; -moz-border-radius-bottomleft:@radius; -webkit-border-bottom-left-radius:@radius;}
.border-radius-bottom-right (@radius:5px) {border-radius-bottom-right:@radius; -moz-border-radius-bottomright:@radius; -webkit-border-bottom-right-radius:@radius;}

IE 6 & 7 hack to support min-height

.ie_min-height (@height:300px) {height:auto !important; height:@height;}

Malarkey Image Replacement

.mir () {text-indent:-1000em; letter-spacing:-1000em; overflow:hidden;}

‘Off-left’ screen-reader supporting layer hiding

.off_left () {display:block; position:absolute; top:0; left:-9999em;}

Cross-browser Opacity – Missing IE filters: not supported in LESS yet.

.opacity (@opacity_percent:50) {-moz-opacity:@opacity_percent / 100; opacity:@opacity_percent / 100;}

Self-clearing for Non-IE browsers: Apply to :after the float container

.self_clearing () {content:"."; display:block; clear:left; visibility:hidden; height:0; width:0;}