LESS Compiler

In my previous post, I mentioned about using Bootstrap for my works. One advantage of using Bootstrap is that we can easily work with its .less files. But, instead of using less.js, I prefer using LESS compiler to generate the real static stylesheet file. For now, I’m using LESS.app on my MacBook. The CodeKit looks interesting, anyway.

It’s easy. Basically, I just need to include my custom .less file, and @import it from bootstrap.less file, so my bootstrap.less file looks like this:

// Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels-badges.less";
//@import "progress-bars.less";
//@import "accordion.less";
//@import "carousel.less";
@import "hero-unit.less";
// My custom CSS
@import "custom.less";

I commented some lines there because I don’t need them. It will generate smaller stylesheet file. If you download Bootstrap, you should find many .less files under less directory. Some files are needed for certain components. Using LESS.app is so easy because:

  • I can set the output path. My HTML file will call a specific stylesheet file. I have it replaced automatically with a new compiled file.
  • After saving my custom.less — I use Coda, anyway — LESS.app will compile it automatically. So, actually I don’t need to look at the LESS.app.
  • LESS.app can minify the output.

Nice. What is your favorite compiler?

Twitter Bootstrap, LESS CSS, and Caching Problem

I’m working on some works right now with a small team at the office. We decided to use Bootstrap as the front-end development framework. We came up with this solution for some key reasons:

  • We need to do it fast.
  • It’s easy to maintain, especially for a collaborative project
  • Bootstrap is cool.

There are lots of similar frameworks to choose like Skeleton, 960.gs, Blueprint, Foundation, and more. It didn’t take long discussion to take Bootstrap. Its features and flexibilities are just perfect for our need. The next thing is that we need to do some customisations, for example on the font sizes and colours. Since Bootstrap might release updates in the future, it’s better to leave the core files untouched.

LESS

Basically, it’s easy to customise them by using its own customisation tool. But, I prefer another method by using LESS. And yes, Bootstrap works great with LESS. The installation works straight forward. After downloading less.js file, add these two lines in the <head>

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Inside bootstrap.less file, there is a little note that we can easily modify the font color and size by working on the variables.less file. I decided not to edit it. I created another .less file — for example: mycustom.less — and import it from bootstrap.less file. So, my bootstrap.less file looks like this:

...
@import "accordion.less";
@import "carousel.less";
@import "hero-unit.less";
// My Custom LESS
@import "mycustom.less";
...

And, this is what I have for mycustom.less:

@baseFontSize: 13px;
@tableBorder: #ddd;
@navbarInverseBackground: #faa141;
@navbarInverseBackgroundHighlight: #ec8b22;
@navbarInverseBorder: #d77c1b;
@navbarInverseLinkColor: #fff;

It should just work. But, does it work as expected? No.

Caching

Editing and saving mycustom.less file, and refreshing my page does not load the latest variables. It takes time to refresh/load the latest changes. It’s not good. It happens because less.js caches the .less files called using @import.
I tried to modify the web server setting by adding these lines in my httpd.conf file:

<FilesMatch ".less$">
Header set Cache-Control "no-cache"
</FilesMatch>

But, it didn’t work. After searching for solutions, there is a method offered for this issue. I added this line of code:
<script>localStorage.clear(); </script>
Now, whenever I make some changes on my .less files, reloading the page will give the latest changes. It works.