Ajaxian

Sunday, June 20th, 2010

Do LESS with Less.js

Category: CSS, JavaScript

Traditionally you would write a less file such as:

and then you would precompile it to some CSS. Not anymore, now you can natively link to the less:

Now less.js will unpack the file and do its thing... making sure that the final CSS will be fully cacheable. Less.js has been written as a CommonJS module so you can run it on the server via node, or in the browser on the fly.

Dmitry answers the perf question (runtime HAS to be slower!), and talks of some cool features:

Wouldn’t live processing lag? Not really. Two reasons for this. One: Less.js has been written from the ground up for great performance, so even browsers with poor JavaScript implementation should still run it very well (Less.js is about 40 times faster than the Ruby implementation—so suffice to say it’s a lot faster.). Two: On modern browsers that support HTML5, Less.js will cache the generated CSS on local storage, making subsequent page loads as fast as pure CSS.

There are other cool features built into Less.js. For example, there’s a “watch” feature available in development mode. This feature will refresh the CSS on your page whenever your .less file is saved with new changes. The best thing is, it won’t refresh the whole page, just the right bits of CSS, live.

Less is certainly more. Even though it is tough to make the performance trade off in production, for development, and for the ability to use less for applications that don't have a server (e.g. I am excited to use this in webOS and mobile Web apps in general! ;) is palpitating. Sencha Touch uses the step cousin, SASS.

17 Comments »

Comments feed TrackBack URI

Being 40 times faster than ruby only really shows how poor the ruby implementation was.. its interesting but I think the better solution is still server side processed, today if anything, the ability to have server side processing is a given.

Comment by meandmycode — June 20, 2010

Looks great. Next, native support for something like LESS in the browser. Is there any reason this would not be doable?

Comment by okonomiyaki3000 — June 20, 2010

While this is a cool idea, it’s not a good idea. Making your CSS dependent on JavaScript goes against Separation of Concerns and Progressive Enhancement. (unless you run it on the server)

Comment by posaune — June 20, 2010

It lowers the barrier for people to get into LESS (no need to have anything installed on your host) and it help developers when they dont have access to hosts with LESS backend implementation. I say its brilliant!

I don’t think anyone would/should use it in production though.

Comment by rasmusfl0e — June 20, 2010

I’d rather use HAML/SASS. Compile it, upload to server, then you get all the goodness of variables, shortcuts, and formatting without having to do it client side for every person. Static files is the way to go for speed.

Comment by pkenoyer — June 20, 2010

Nice. Good and fast for experimenting. Still less.js COULD be executed on the server and save output into .css file.

Comment by movax — June 20, 2010

I agree with @posaune. Could be great on the server, but making CSS dependent on Javascript is hardly ever a good idea for a public website (in production).

Comment by kangax — June 20, 2010

LESS + node = way fast server-side dynamic css.

Comment by elsewares — June 20, 2010

I’m a big fan of the separation of concerns. In particular, separating the concern for ‘Separation of Concerns’ from the concern for ‘actually doing stuff’.

Comment by okonomiyaki3000 — June 20, 2010

Many web apps are totally dependent on JS these days. It makes sense to have a basic (plain) CSS file for the compatibility message and something like this for the JS-dependent features.

Comment by Menno — June 21, 2010

I know this is waaaaay off topic but…how difficult is it for a development website to REMOVE THE LINKS AROUND POSTER’S NAMES so that we don’t see this http:// null / rubbish? You guys do actually own the website right?

And you do kinda make a tiny (read: more than nothing) bit of cash from advertising. So spend some of it to fix this and other obvious (I really am talking about images/video/code snippets being cut off!) problems with what is otherwise a reasonably good forum for discussion?

Comment by sixtyseconds — June 21, 2010

For separation of concerns trolls: If you disable JavaScript, then you get what you deserve…

Comment by steida — June 21, 2010

Although I like some of the things that they offer, I too would be against making my CSS require javascript. I’d rather they take the concepts and have them implemented in CSS3.

Comment by travisalmand — June 21, 2010

@travisalmand, I too would like to see a new version of or alternative to CSS using this or some similar syntax but what if that happens? What if CSS4 is based on LESS? When can we start to use it? Only when every single browser that exists today has been replaced. 10 years?

It’s not like vendor prefixes which will just be ignored by other browsers, LESS notation will simply not work at all. You will need some kind of bridge and Less.js appears to be just that.

Anyway, show me the petition for making this an accepted format and I will sign with every pseudonym I can think of.

Comment by okonomiyaki3000 — June 21, 2010

Other commenters have already stated why this is a bad idea.

From less.js
http://github.com/cloudhead/less.js/blob/master/dist/less-1.0.21.js


function select(str) {
if (!document.querySelectorAll && typeof(jQuery) === "undefined") {
log("no selector method found.");
} else {
return (document.querySelectorAll || jQuery).call(document, str);
}
}


The strategy can be expected to have inconsistent results depending on the environment; most obviously, throwing errors where jQuery and document.querySelectorAll are missing. The strategy also requires that document.querySelectorAll have a `call` property that is callable. This is not a requirement of the selectors API. And likely it won’t be consistent across browsers. Trying…


typeof document.querySelectorAll.apply; // "object" in IE8.


Though a discrepancy was anticipated, the actual result is surprising.

Comment by dhtmlkitchen — June 21, 2010

@travisalmand, I too would like to see a new version of or alternative to CSS using this or some similar syntax but what if that happens? What if CSS4 is based on LESS? When can we start to use it? Only when every single browser that exists today has been replaced. 10 years?

It’s not like vendor prefixes which will just be ignored by other browsers, LESS notation will simply not work at all. You will need some kind of bridge and Less.js appears to be just that.

Anyway, show me the petition for making this an accepted format and I will sign with every pseudonym I can think of.

Talk PC is the place where you can post your Computers & Internet questions of any type and get them clarified. You can also reply to the Computers & Internet Questions of any type in any formats. You can also share the views through Blogs and Forums
Mysiteinfo.com provide website reviews, website value, traffic stats,website info and cover all international domains.

Comment by talkpc — June 23, 2010

Aw man… I just finished an early version of a node.js style management tool called SON. But since my approach is different, it might justify a mention…

I thought it best to describe styles with pure JSON objects, making them manipulable in the normal js way. This removes the need for constructs like ‘mixins.’ Your styles file is just a js file.

Node.js/Express takes the js and returns a corresponding css file.

No demos, yet, but the code works:
http://github.com/twfarland/Son

I agree that separation of concerns is important, but it seems ad-hoc to achieve this by using separate languages for concerns.

What do you guys think of this approach?

Cheers

Comment by twfarland — September 22, 2010