LESS import - reference vs once

Question

Situation I'm setting up some framework for a new website to be built by a dev team (rather than one dev). My current css setup uses the following LESS files: - `grid.less` - `mixins.less` - `style.less` - `template-home.less` - `template-destination.less` - other template-specific files The file `style.less` imports everything: ``` @import "grid.less"; @import "mixins.less"; @import "template-home.less"; @import "template-destination.less"; ``` Work-around This seems to me to be a fairly obvious and common approach - however, if I want to use a defined mixin in one of the `template-*` files, LESS cannot compile the file because `NameError: .exampleMixin is undefined`. Reading through the docs, it appears I have two options, both of which involve importing my `mixins.less` into each template file that might use it. I can either add: ``` // either reference the file @import (reference) "mixins.less"; // or use once @import (once) "mixins.less"; ``` Question I understand what each of th…

Accepted Answer

Why I can't just import the mixins to the global style.less and use them in each of the other included files?

This method should work fine without any compile errors. It is only if you are trying to compile `template-*.less` without `mixins.less` that it will kick up a fuss. It you are getting an error check that the location to `mixins.less` is correct.

Once and reference

I understand what each of these is doing, but what are the pros & cons of each?

Once

The principle of once is to only import a file once. For example, you may have an import for `mixins.less` in both of your `template-*.less` files and in `styles.less`. This will prevent the file being imported multiple times, resulting in duplicated css styles in your stylesheet.

It is worth noting that `once` is actually the default behaviour of `import` so does not need to be specified.

Reference

Reference is quite clever. If you import with reference, when compiled it will only output styles from the imported file that have been used in the parent less file. Typically this would be used for mixin classes and extend classes.

Example

```
//Mixins.less
.m-bacon {
   color: red;
}

.m-smokey {
   color: pink;
}

// Styles.less
@import (reference) mixins.less;

.pork {
    .m-bacon;
}
```

If styles.less was compiled it would only contain the `pork` class.

```
//Output
.pork {
    color: red;
}
```

Summary

In summary `once` prevents the same styles being generated multiple times. This is also the default behaviour of `@import`. `reference` prevents unreferenced mixin classes and extend classes being generated at compile time.

LESS import - reference vs once

Solution

Problem