@import-once in LESSCSS, way handier!

21 May 2013 by Vinod Sobale 1 comment

I would admit that I started playing around with SASS way before my first encounter with LESS. By no means was I under-impressed with what SASS could let me do. Right from creating includes(mixins) to make your code reusable, variables to declare once & use whenever, functions to perform not just arithmetic operations but by passing appropriate arguments, creating chunks of CSS that’s not always needed.

But soon after, when I found my @imports getting duplicated with every @import, I began to lose patience. Although there was quite a few hand RUBY snippets circling around the web, I could get none to work. I blame myself for the lack of RUBY knowhow.

SASS featured request - Idyllic Software

One that caught much attention was Wilson pages sass-import-once. On my request, Wilson even added examples to the repository.

Wilson Page Twitter help- Idyllic Software

After days of trial & error, I reached no conclusion & gave up on it.

However one day out of the blue, I figured I might as well give LESSCSS a try. So, I converted all my existing codebase to LESS library named ‘Zunkaless’ & it worked out just the way I wanted. Finally, it was time to experiment with the @import feature of LESSCSS. I usually @import .less files such as reset.less, buttons.less, almost everywhere. If this was to get duplicated with every @import, I’d have to jump off a cliff. But then I used magical ‘@importonce’ that stopped duplication so cleverly that I was blown away.

How to use it?

Screen Shot 2013 07 10 at 2.59.48 PM

FYI, I am using LESS 1.3.3 with Codekit & @importonce is yet to become a default behavior of @import.

default import behavior LESS - Idyllic Software

This doesn’t in any way make me biased about SASS. Each of these preprocessors has pros & cons but at the moment LESS seems to address @import duplication issue very well. So, for now…

Kudos to LESSCSS!

Vinod Sobale

Follow me on Twitter

1 thought on “@import-once in LESSCSS, way handier!”

  1. Just to confirm, I’m using LESS 1.6.3 (latest is 2.x) and the default behaviour for @import is to import once. I’m really glad they came to their senses in 1.4 and made this the default! I was actually scared of doing multiple imports and had to double-check the docs.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)