what is the LESS CSS statement @import-once good for?

css, less

Solution

When you work with LESS you can have few less files (I have like 12 including media-queries, resets, etc), and sometimes you don't have the control of how many `@import` you have done between files, and that's the reason behind `@import-once`, to avoid style duplication.

When should I use `@import-once` instead `@import`?

Suppose you have `main.less` which imports other less files. And those files all import `utils.less` that contains useful mixins or variables. When you do this, the mixins get duplicated in the compiled code (css file). Once for each time `utils.less` was imported, even your CSS file should be 1mb instead 20kb. In case like this one you should use `@import-once`.

EDIT:

As pointed by @TJ, since LESS 1.4.0, `@import-once` is removed and is now default behavior for `@import`.

Problem

Original source