Sep 17, 2011

The Trouble with LESSCSS

GreenScript v1.2.6 start to support LESS. I am pretty excited with this feature and decide to move on to LESS. However very soon I found I am faced with an annoying issue with LESS.

So the story starts with twitter bootstrap, a CSS framework built with LESS which is pretty hyped up by web developers recently. I decide to use it in my view. I've included 'less/bootstrap.less' in my default template. It's all good, unless I want to reference a variable defined in bootstrap library in my own foo.css:
.hero-unit .h2 {
  margin-bottom: .5em;
  font-size: 40px;
  color: @grayLight; // grayLight is defined in less/preboot.less file
  padding: 0 10em;
}


The problem with the above code is when GreenScript tries to compile it, the less compiler complains that the variable @grayLight is not defined. Well, it's a surprise but it's correct. The fix is to add the following line to the beginning of the css file:
@import "bootstrap/preboot.less";

However, the issue with this approach is it duplicates all compiled css code from "bootstrap/preboot.less" in the final css output. And if every css file tries to include this or that less libraries, the css will get bloated very quickly.

Another approach is to remove all @import clause from LESS file and let GreenScript's dependent management mechanism to manage the import relationships. E.g. in the view file (or in greenscript.conf file), declare the dependency between foo.css and bootstrap/preboot.less:
#{css 'foo < bootstrap/preboot'/}


GreenScript will make sure the content of preboot.less be put in front of foo.css when doing merge of the 2 files. And then call less compiler to compile the merged content. That could solve the result css bloat out problem, but another issue comes up. Because GreenScript run LESS compilation on merged file only, if there is an error in the compilation, it's not possible to give out information that which file caused the trouble, and make it very hard to debug the LESS errors.

The final solution might need a pure Java Less compile engine supporting the session concept, where all the LESS variables, mixins etc be cached through out the session and could used in future compilation process in the same session. So far I don't know there is any implementation for this stuff. I would like to put it in my TO-DO list. But please let me know if you already have that tool.

1 comment:

Napa Valley Spa said...

http://code.google.com/p/maven-less-plugin/

https://github.com/polopoly/maven-lesscss-plugin

http://www.asual.com/lesscss/