Taking LESS.js for a spin, and how does it compare to Sass 3

What the hell is LESS?

LESS logoIf you have kept up with me, then hopefully you read my post on Sass 3. If not, well hopefully you are not out of the loop and have at least heard of it. This post is about LESS and LESS.js (which you can read about here). LESS used to be a Ruby Gem install, not sure what that means exactly other than it is a pain the ass to install if you are not familiar with the command line.

There is a brilliant new way to actually use LESS, and that is to simply use javascript. Nothing to install, just include this line:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

You will also need a link to a LESS file, which will look something like this:

<link rel="stylesheet/less" href="css/test.less" type="text/css" />

A simple text file with a .less extension.

So what exactly is LESS? I would define it as a simplified and easier to use version of Sass. It incorporates the cool parts of Sass, such as variables, mixins and nested rules. Operations are also included, but I haven’t delved too deep into it yet. But a small test was all it took to see what I liked and disliked. First, lets take a look at the VERY basic page I did.

Click here to see the demo.

Again, LESS does all the basic stuff Sass can do, only with slightly different syntax. For instance, when declaring a variable, you use the @ symbol instead of $. When doing Mixins, you do something like a class: .className(values go here), instead of the @mixin that Sass uses.

Why it kicks ass

Lets get on with what is good about LESS. First, it took me less time to learn LESS…hmm that is going to be annoying isn’t it? Anyway, less time to learn than Sass. Now keep in mind that I have already begun using Sass, so that could be a factor in how quickly I was able to pick it up. It’s not really all that hard to understand. If you know CSS well, then this is a twenty minute learning process, and probably only an hour to master. This is a huge plus in its favor.

Another would be the fact that they came out with a javascript version of it. All you need is that one line of javascript, and a text editor for creating the .less file. For a second dose of cool, add this after it:

<script type="text/javascript" charset="utf-8">
    less.env = "development";
    less.watch();
</script>

This basically auto-refreshes the CSS whenever you save the .less file. You make a change to the file, save it, and freakin’ BAM! the browser shows the update pretty much instantly, without having to refresh(this is for working locally). On top of that, if you make a mistake, you will know it big time, as it puts out a giant ass warning on top of the page. This makes it fast and easy to deal with. The only other thing I like, which is probably a huge plus if you are familiar with Sass, is that there is no manual compiling of the .less file.

Now what I personally don’t like about it. You were probably thinking this was just a ringing endorsement of a product, didn’t you? No, there are actually things I don’t like, and its difficult to say what others will say about them.

Every rose has its thorn…or two

One, take a look at my demo, check the source code, and click on the link to the .less file. What do you see? That’s right, not just plain old CSS. You actually see LESS, so if are unfamiliar with it, you will be asking yourself what all the crazy looking stuff is. I am not sure exactly why this bugs me, but it does. I just want to see the regular CSS output, not the LESS itself. This is opinion, so take it for what its worth. I’m just telling you what I personally don’t like, and what to expect.

Two, and notice that this is what I listed as one of its good points, is your CSS is now reliant on javascript. This above all else is the one factor that really bothers me. Where Sass is compiled ahead of time with the operation already over, LESS is doing it on the fly. Plus, while not big, if you are not using a minifier, you are adding http requests just to make your CSS work. I also have NO idea if LESS plays well with other javascript libraries such as jQuery or Ext (if ANYONE can answer that, I would HUGELY appreciate it).

Let’s wrap it up

After trying both LESS.js and Sass 3 now, I will say that at the moment I favor Sass 3. I prefer the mixin syntax even though it is longer, for the simple fact that I can spot them a mile a way. In LESS they can look like a class if you are not paying attention. I also prefer the $ method of calling a variable because I am familiar with jQuery, and the symbol is recognizable for me. LESS.js gets the advantage points in not having to install anything, ease of getting started, and no manual compiling, but ultimately scares me with having to rely on javascript for my CSS, and not knowing for sure how it behaves with other js libraries.

The article I linked to in the beginning of this post, about making CSS obsolete is jumping the gun way to early. I will agree that LESS.js is pretty damn cool, but it’s requiring people to learn something on top of CSS, which they might not have a terrific grasp of yet anyway. Will people use it? Yes. Will a LOT of people use it, to the point of taking over just plain old CSS? No, not in my opinion. But I would love to see this kind of thing incorporated into CSS, and its a shame that CSS3 doesn’t. I would almost rather have these types of advances in CSS, than being able to add a drop shadow or a rounded border. Almost.

For now…I’m still sticking with Sass 3.

Coupon Code: webmachine

jQuery junkBox

.select();
This event method will bind and event handler to the select() event, or trigger that event on an element. Below, when any part of the text is selected it will send an alert.

$('#myID').select(function() {
alert("Do not select this text again, or you will be sorry!");
});

Tags: , ,

10 Responses to “Taking LESS.js for a spin, and how does it compare to Sass 3”

  1. Kurt Milam says:

    Thanks for the interesting article. I’ve been wanting to integrate SASS or SCSS into my PHP projects for a while. I came across this article because I was looking for a javascript SASS/SCSS complier (and thinking about building one on my own, if it didn’t already exist).

    I finally decided to bite the bullet and install Compass on our server. With a bit of effort (45 minutes or so), I was able to set up a Compass project inside what’s normally a PHP application, and it’s working nicely.

    I like the idea of LESS and compiling the code on-the-fly at the client. Probably not a bad idea for development purposes, but it’s probably better to save the compiled code to a file for a production app.

    Nicely-written article. Helped me make up my mind how to move forward. Now if I can only find a way to allow my CSS coders to turn on Compass’ watch without having to log in to the server over a terminal.

    • jcDesigns says:

      Thanks for the comments Kurt, and glad the post was some help. I wish I could say it only took me 45 minutes to get Compass working, but I am extremely stupid when it comes to command line stuff. Once I had it up and going though, it worked great.

      I agree, I like the idea of compiling on the fly, but something about that really bothers me, which I mention in this article. This is one of the main reasons, besides liking the SCSS syntax better, why I am going to go with Sass 3.

      You might also want to check out my review on Sass: http://jc-designs.net/blog/2010/06/test-driving-sass-3-a-second-look-at-sass/

  2. Tim says:

    I also have NO idea if LESS plays well with other javascript
    libraries such as jQuery or Ext (if ANYONE can answer that,
    I would HUGELY appreciate it).

    I gave the latest version of less.js (1.0.35) a try with my complex ExtJS (3.2.1) app and it seemed to work fine, altho the “less.watch()” thing failed (will investigate why – might be something to with my use of Google App Engine as a server, altho it looks like it just sets up a time to refetch the .less file every second).

    Personally I intend to use less.js in development, but will probably compile the less to css with the ruby command or similar before I deploy a production version (at the same stage that I minify my source etc) – this gives me ease of use during development, and fewer dependencies at runtime.

    • jcDesigns says:

      Thanks for the comment Tim. Very cool that it works with Ext. I will assume then that there are no problems with jQuery. I am surprised to actually find some who knows about Ext that is coming here. If not for work, I would not even have known that the library existed.

  3. [...] Taking LESS.js for a spin, and how does it compare to Sass 3 [...]

  4. Chris says:

    I’ve been using LESS.js for 3 months along side JQuery without any hick ups and it’s magical.

    I have my own base template setup with fixes for IE like CSS3Pie, HTML5 shiv (for IE’s), and IE PNG Fix because I have to support IE6 as well.

    Let me tell you, with my setup above + LESS = 2 hour cut ups, maybe less, from a PSD mock. I couldn’t touch that before when I first started 2 years ago. lol

    <3 LESS

    • jcDesigns says:

      While I prefer Sass over LESS, I am really glad to see that at least some people are using these. With Sass, my development time has been cut drastically. I now find writing straight CSS extremely tedious. Glad that it works with jQuery as well. I assumed it would, but one never knows.

      Have you used the HTML5 boilerplate? Cause it has everything you mentioned except PIE, which I add myself.

      Have you tried Sass, or did you just go straight to LESS? And do you compile or leave it as is with the js in play?

  5. Felipe Gasper says:

    Just run less.js with node…that’ll compile to native CSS for you on the server. If you want, then pipe that through a CSS minifier.

  6. nick says:

    There is a LESS compiler app for mac (http://incident57.com/less/). I think windows people are out of luck.

    Working with the live js method in dev is an amazing time-saver, but being able to compile it for production is a must, I agree.

Leave a Reply