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.
One that caught much attention was wilsonpage’s 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 @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
& @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!