Importing dynamic path in Less mixin - import

Question

I'm rewriting my Less css structure to be more scalable. I'm looking for an architecture that loads a templates for each media query for each template.
Preferably, I want to load this in a mixin. The current mixin looks like this (but does not allow specific component loading)
`
/**
* Progressive enhancing overrides (mobile first)
*
* Mobile loads "mobile.less"
* Wide mobile loads "mobile.less" and "widemobile.less"
* Tablet loads "mobile.less", "widemobile.less" and "tablet.less"
* etc.
*/
.progressive-enhancement() {
// Mobile layout
#media only screen {
#import (less) "../template/mobile";
}
(...)
}
So what I'm looking for is something like this (not working):
.progressive-enhancement(#component: main) {
// Mobile layout
#media only screen {
#import (less) "../template/#{component}/mobile";
}
(...)
}
This however, does not work, resulting in an error claiming that #component is undefined.
I think the problem is that Less tries to do the import before the mixing is called, not having the #component defined at that stage.
Is there any way to use #import dynamically with variables provided by the mixin?
Thanks in advance.

Answer 1

Yes, it's impossible. And, yes, this is because Less have to evaluate language entities in certain "typed" order instead of "top-to-bottom" order (roughly it's imports -> mixins -> variables etc.) because of lazy-evaluation principles (there're some internal workarounds possible to handle certain specific things with an exception to this, but those exceptions will never be anything but kludge).
As for your specific use-case, the easiest workaround at first glance would be to use imports instead of mixins, and let the components to specify their own names:
// progressive-enhancement.less:
#media only screen {
#import "#{component}/mobile";
}
// etc.
Then for each component you provide its "root" file:
// ../template/button.less:
& {
#component: button;
#import (multiple) "progressive-enhancement.less";
}
.
// ../template/toolbar.less:
& {
#component: toolbar;
#import (multiple) "progressive-enhancement.less";
}
etc.
And finally in your master file you just import those ordinarily:
// main.less:
#import "../template/button";
#import "../template/toolbar";
(Obviously file names and and their actual locations to be adjusted to your taste).

Answer 2

I'm answering my own question so i can use some formatting to show my workaround.
I have this directory structure:
less/
- components/
- navbar/
- mobile.less
- tablet.less
(...)
- config/
- defaults.less
- lib/
- grid.less
- mediaqueries.less
(...)
- template/
- base.less
- mobile.less
- widemobile.less
- tablet.less
(...)
- main.less
The main.less file import the required libraries (e.g. mediaqueries.less). These provide mixing to use (e.g. .progressive-enhancement()). The mediaqueries library has multiple mixins that take care of template loading. See the docblock:
/**
* Progressive enhancing overrides (mobile first)
*
* Mobile loads "mobile.less"
* Wide mobile loads "mobile.less" and "widemobile.less"
* Tablet loads "mobile.less", "widemobile.less" and "tablet.less"
* etc.
*/
In addition, main.less also includes template/base.less for common styling ,font loading, custom mixins etc.
Since it was not possible for the mediaqueries library to handle the components in a nice way. This logic was moved to the them files. E.g. mobile.less:
(...)
/**
* Imports
*/
#import (less) "../components/navbar/mobile.less";
#import (less) "../components/postslist/mobile.less";
#import (less) "../components/footer/mobile.less";
(...)
Whenever i need to overwrite a rule for a certain media query additional imports can be made to to other files (unfortunately no auto loading). E.g. tablet.less
(...)
/**
* Imports
*/
#import (less) "../components/navbar/tablet.less";
#import (less) "../components/postslist/tablet.less";
Note that the footer is unchanged from mobile.
This solution might be a bit more verbose than the solution provided by #seven-phases-max but I think it's cleaner since variables don't need to be abused as parameters.