Less Language Imports Interpolation

Use @{variable} syntax inside import urls to use variable value. If variable variable exists, the expression is replaced by variable value. If parentheses does not contain valid variable name, the expression is left as it is and results in an invalid file name.

Sample input:

@file: "file"; //define variable
@import "@{file}.less"; //interpolate inside mixin
@import url("@{file}.less"); //interpolate inside mixin

Limitations

There are two main limitations:

• Imports interpolation never sees variables returned from mixins. It sees only directly defined variables.
• Imports interpolation sees only variables defined in previous imports. It does not see variables defined in later imports.

Next example fails, because the import uses variable returned from mixin:

.mixin() {
  @variable: "imported";
}
into {
  .mixin();
  @import "@{variable}.less"; //FAILURE
}

All following examples require imported-1.less file:

@variable: "file.less";

This fails:

@import "imported-1.less"; //imports variable
into {
  @import "@{variable}.less"; //FAILURE
}

This fails too:

into {
  @import "imported-1.less"; //imports variable
  @import "@{variable}.less"; //FAILURE
}

And this fails too:

into {
  @import "@{variable}.less"; //FAILURE
  @import "imported-1.less"; //imports variable
}