Cannot import the same file at one time
chenyuncai opened this issue · 4 comments
Hello, There is a problem that i found.
Here are some less files below:
a,b,c,d
a import b
a import c
b import d
c import d
I can only import the d file in b's place if the b is before c in a file;
I want use the common styles with a different container so that I can location the exact elements.
Thanks ^U^
Note this issue tracker is for the Less documentation development. For the Less language and compiler issues use https://github.com/less/less.js.
Either way, what you face is an intended behaviour: http://lesscss.org/features/#import-options (i.e. use (multiple)
if you need to import a file more than once).
Closing as expected behaviour (and wrong repo).
@chenyuncai , Hello.
Now, I describe it, so others know what you think.
Filename : a.less
#a { @import "b.less"; @import "c.less"; }Filename : b.less
#b { @import "d.less"; }Filename : c.less
#c { @import "d.less"; }Filename : d.less
#d { color: red; }
Your expected results.
#a #b #d {
color: red;
}
#a #c #d {
color: red;
}
Actually there is only one result.
.a #b #d {
color: red;
}
Solution
Modify the contents of a.less
#a {
@import (multiple) "b.less";
@import (multiple) "c.less";
}
compiles into:
#a #c #d {
color: red;
}
#a #b #d {
color: red;
}
You can also test a few cases, to find out more.
test 1
a.less
/*
#a {
@import "b.less";
@import "c.less";
}
*/
#a {
@import "c.less";
@import "b.less";
}
Exchange b.less and c.less locations
compiles into:
/*
#a #b #d {
color: red;
}
*/
#a #c #d {
color: red;
}
/*
Difference is that the compilation results
#a #b #d
#a #c #d
*/
test 2
a.less
#a {
@import "b.less";
@import "c.less";
}
#k {
@import "c.less";
@import "b.less";
}
/*
#k {
@import "c.less";
@import "b.less";
}
#a {
@import "b.less";
@import "c.less";
}
*/
compiles into:
#a #b #d {
color: red;
}
/*
#k #c #d {
color: red;
}
*/
test 3
a.less
#a {
@import (multiple) "c.less";
@import (multiple) "b.less";
}
.k {
@import "b.less";
@import "c.less";
}
compiles into:
#a #c #d {
color: red;
}
#a #b #d {
color: red;
}
// K not compiled
test 4
a.less
#a {
@import (multiple) "c.less";
@import (multiple) "b.less";
}
.k {
@import (multiple) "b.less";
@import (multiple) "c.less";
}
compiles into:
#a #c #d {
color: red;
}
#a #b #d {
color: red;
}
.k #b #d {
color: red;
}
.k #c #d {
color: red;
}
Thanks, I found the directive options about "multiple", I'am sorry I even did not read the doc completely.Thanks again.