@import-once in LESSCSS, way handier!

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 were 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 wilsonpage’s 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 @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!

Share this post