less/less-docs

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.