-
Notifications
You must be signed in to change notification settings - Fork 47
Less Language Imports Interpolation
Mária Jurčovičová edited this page Feb 15, 2014
·
8 revisions
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
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.
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
}
Next import is not interpolated:
@variable: "file";
@import url(@{variable}.css);
and compiles into:
@import url(@{variable}.css);