Question about expected behavior of @import

[paulsheldrake]

I have a variables-mixins.less file and multiple other less files that use the mixins defined in that file. What I'm trying to do is have one large compiled css file as the result.

I've created another less file (styles.less) that has content like this

@import variables-mixins.less
@import less-file1.less
@import less-file2.less
@import less-file3.less
@import less-file4.less

What's happening is that now for every file that I import past the variables-mixins file, the rendered mixins from variables-mixins.less gets duplicated. So if i had a mixin called .rounded-corners(border-radius: 7px). The rendered file now has a class looking like this

.rounded-corners(
  border-radius: 7px;
  border-radius: 7px;
  border-radius: 7px;
  border-radius: 7px;
  border-radius: 7px;
)

I would have thought that it should just have the one border-radius style after compiling. Any have an idea of what I'm doing wrong?

[Bluestreak2k5]

I am not encountering this problem, have you tried importing this way:

Main Less file:

@import "reset";
@import "mixins";
@import "common";
@import "site";

each one of these refers to a .less file in the same folder and the main less file. Point your compiler at the main less file and it will compile it all into 1 CSS file.

This might have been fixed in a recent update, or it might be an unknown bug with the way it imports. I am using 0.3.6 version currently.

[leafo]

similar to #305

less.js now has @import-once for exactly this problem. I'll be adding it shortly to lessphp

[gruvii]

+1

[barryvdh]

Thanks, @import-once is exactly what I need :)

[barryvdh]

@leafo, they changed the default behavior to import once, and added import-multiple for the old behavior:
less/less.js@f27ea74

[davidenke]

+1
Would be very useful, even if it is not the default behavior...

[davidenke]

Anything new? Will it be in a release in the near future?

[rulatir]

+1000 badly!!!

[rulatir]

Version after version with this extremely important missing feature unimplemented...

[rulatir]

Apart from helping to avoid duplicates and boosting performance, this feature would also increase the expressiveness of the language. Consider this scenario:

//file wider-main-column.less

@import "variables"; //defines @main-column-width, among other stuff

@main-column-width: 800px; //attempts to override

@import "layout"; //imports "variables" too, un-overriding our attempted override

Versus this:

//file wider-main-column.less

@import-once "variables"; //defines @main-column-width, among other stuff

@main-column-width: 800px; //overrides

@import "layout"; //imports-once "variables", but we've already imported it, so our override stands, YAY!

[barryvdh]

The behavior is changing in the new 1.4 version of Less.js:
https://github.com/cloudhead/less.js/blob/master/CHANGELOG.md

• default behaviour of import is to import each file once.
• You can specify options on imports to force it to behave as css or less @import (less) "file.css" will process the file as less

More info: less/less.js#1185 (comment)

[jimmymorrisuk]

Hi @leafo

You said "less.js now has @import-once for exactly this problem. I'll be adding it shortly to lessphp" however this was 9 months ago. Any news on when this might be coming?

Cheers

[rulatir]

When? When? When?