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 three 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.
• Unquoted urls url(no quotes) are not interpolated. Unquoted urls have their own complicated syntax. Interpolating them would a lot of complexity and little value.

Example: Mixins

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

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

Example: Import Order

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
}

Example: Unquoted Url

Next import is not interpolated:

@variable: "file";
@import url(@{variable}.css); 

and compiles into:

@import url(@{variable}.css);