Experimenting with LESS

I’ve been exploring LESS this weekend as a way to make writing CSS a much more efficient affair. So far, so very good! I’m using LESS.app for Mac OS X to compile my .less files down to CSS with each save. There are Ruby scripts and JavaScript available for interpreting LESS on the fly, but I far prefer to serve up already-baked CSS with the app, which gets bonus points for spitting out minified files. Be careful with the minifier, though, if you’re writing CSS with LESS for WordPress (try saying that three times fast) — it will strip the comment block WordPress needs to identify your theme from the CSS file. There are a couple workarounds for this; the easiest way is probably just to use a minifying WordPress plugin (I use W3 Total Cache’s minifying facility myself), or if you want your server to have one less thing to do, you can spit the minified files out to a different location, reference that location in your HTML, and just use style.css as a way to identify the theme and for nothing else. (WordPress doesn’t require you to store your styles there, but it is generally more consistent to do so.)

Using the app has another great side benefit as its compiler flags errors it finds in the code and tosses up a Growl notification with a brief explanation of the problem — so not only am I writing CSS more efficiently, I’m also writing much more error-free CSS as a result. Win-win.

Who else is using LESS (or its contemporary SASS) to write and simplify CSS?

3 thoughts on “Experimenting with LESS

  1. Anonymous

    I’ve become a big LESS lover over the past year, and truely appreciate how maintainable you can make your CSS.

    The LESS.app is great and you’re running as soon as you download it.  It makes it so easy to listen to a directory and auto compile while you are saving, but I tend to get confused sometimes as to what I’m compiling so I like to manually compile which is probably why I also enjoy the convenience of the ruby gem that also makes it a snap.

    > gem install less
    > lessc master.less > ../css/styles.css

    BOOM, bang, magic ….

    I love the fact that you can mix vanilla css with less/javascript and basically compile one less file

    ### master.less ###
    @import “lib/main.less”;@import “lib/ui-layout.less”;@import “lib/jquery-ui-1.8.15.custom.less”;@import “lib/datatables/datatables.less”;@import “lib/common.less”;@input_width:               210px;@input_width_small:         @input_width – 60;@select_input_width:        (@input_width + 10);@select_input_width_small: (@select_input_width – 60);@g_white:                           #FFFFFF;@g_gray_02:                         #F9F9F9;@g_gray_04:                         #F5F5F5;@g_gray_2_04:                       #F6F6F6;@g_gray_05:                         #F3F3F3;@g_gray_06:                         #F0F0F0;@g_gray_07:                         #EEEEEE;@g_gray_11:                         #E2E2E2;

Comments are closed.