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.
One that caught much attention was Wilson pages sass-import-once. On my request, Wilson even added examples to the repository.
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?
FYI, I am using LESS 1.3.3 with Codekit & @importonce is yet to become a default behavior of @import.
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!
Follow me on Twitter