what is the LESS CSS statement @import-once good f

Question

Even after reading https://github.com/cloudhead/less.js/issues/212, I don't understand the meaning of the @import-once statement.

Answer 1

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.

Answer 2

@import-once simply means "If it was already imported before, don't import it again". It's done to prevent duplication of CSS styles.