ability to use "externally defined" variables in @import statements

[jonschlinkert]

This is based on an offshoot of #410.

There have been multiple requests for the ability to use "externally defined" variables in import statements. With the reduced use case being:

Given we have a LESS file, bootstrap.less, which contains a list of import statements to other less files:

// Core variables and mixins
@import "@{path}variables.less";
@import "@{path}mixins.less";

// Reset
@import "@{path}normalize.less";
@import "@{path}print.less";

// etc...

And given we have a second file, variables.less, which contains only variables:

@theme: something;

// Brand colors
// -------------------------
@brand-primary:         #008fd5;
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

It is currently impossible to define a variable in the second file (such as @theme: something;) to modify the paths in the @import statements of the first file.

This is limiting since it requires a developer to specify variables in two files, effectively defeating the purpose of using variables in the import statements of the second file.

[Stann0rz]

+1 for this
@jonschlinkert thanks for raising the issue 👍

[jonschlinkert]

no prob

[matthew-dean]

Modifying vars from the command line doesn't set a variable if it doesn't exist? Have you tried that?

[Soviut]

Not to complicate this ticket, but I'd like to propose some sort of convention for naming a file containing just external variables (and possibly inline configs) in any documented examples. My vote would be for settings.less but there's also config.less. It seems more likely that users and theme authors would look in one of those files first instead of variables.less.

[jonschlinkert]

@Soviut technically that's different enough from this request that you should probably create a new request for it. However, I recall having a similar conversation when we were discussing the options directive and the consensus seemed to be that a dedicated file for configuration wasn't something people wanted. Variables were not a part of that conversation though, so maybe you'll have more success with it.

[lukeapage]

whats the idea for "externally defined" - do you mean through the command line? Something I always meant to add but never got round to, so I think that would be great

[jonschlinkert]

@lukeapage I meant "variables defined in a different document than the one with the import statements in which they will be used"

[lukeapage]

If you define a variable and import a file, you can use that variable in
that file to import.. you just can't import a file containing a variable
and then use that variable in an import.. because imports are async we
don't wait on one import loading before starting the load of a 2nd..

[jonschlinkert]

@lukeapage yeah I'm completely on board with that, I created this issue to get people moved off of issue #410, which has been implemented. To be clear, I'm not personally asking for this feature, but since there was an ongoing discussion about this on #410, I just wanted to create this issue and advocate for those who were asking for it.

[Stann0rz]

@lukeapage i understand why this does not work now, i guess @Soviut's suggestion would be a great resolution. This way, a specific settings.less file could be imported first before the others are imported asynchronously.

[Soviut]

It could certainly work within a require.js situation if the order! directive was used.

[lukeapage]

you could get this behaviour by having a settings.less file that at the end imported the entry less file

Maybe the ideal solution would be to add code that says that if an import contains a variable, wait for all the previous imports to import before processing this import. That would then give us the desired behaviour. The only thing that then wouldn't work would be mixins that add variables wouldn't be used to work out the imports (but then that starts getting really complicated and I don't think anyone is asking for that)

[lukeapage]

I've set this as low priority as it feels like an inconvenience rather than something holding anyone back.. does anyone disagree?

[Stann0rz]

@lukeapage Yes, i agree that this is a low priority issue. It would be a 'nice-to-have' feature.

[jonschlinkert]

completely agree @lukeapage, but I would not classify this as a bug.

[AndersDJohnson]

+100

[janogarcia]

Yes please, +1 for this!

@import "variables.less";
@import "@{bootstrap-path}mixins.less";

Would be much more elegant than the current workaround of declaring the variable in-place:

@import "variables.less";
@bootstrap-path: "../../libs/bootstrap-3.0.0/less/";
@import "@{bootstrap-path}mixins.less";

[rolandjitsu]

Yes +1 for this .... it would be really nice to be able to use externally defined vars to import.

[tateman66]

Hey Jon/Luke,
Do you guys have any info on this? We've been through 3 major versions (1.4-1.7) now since this thread had any activity. Must be difficult if it hasn't been implemented by now.

Just want to know if I can ever remove my stinky pre-processing hack which uses grunt to replace paths in the file system in @imports before running grunt less. :)

By the way, you guys are doing an unbelievable job on this product by the way! I created a Bootstrap 3 themer in about half a day that completely blew our product people away! All thanks to the weaponry from Bootstrap and LessJs!

Keep it up.
Steven Tate

[almeidap]

I would love to see this feature implemented in LESS and, particularly, the ability to alter another import tree as per #1212 (now closed).

[caioariede]

+1 for this

[lukeapage]

This should be fixed in the latest v2 beta