kontur kontur - 5 months ago 6
CSS Question

Less extend from imported file not working vs mixin from imported file

With the following two files

a.less
and
b.less
:

a.less
:

.red {
background: red;
}


and
b.less
:

@import "a.less"

.testA:extend(.red) {
}

.testB {
.red;
}


The result for
b.css
is:

.testA {}
.testB {
background: red;
}


Why does extend not work with the imported mixin/class definition for
.testA
? Is there a limitation on the extend syntax that requires the extended definition to be present in the same file, i.e. is this expected behavior?

Note that
.testA
gets compiled correctly if I move the
.red
mixin to
b.less
.


Edit: I am using the less binary precompiler, version 1.6.1

Edit: To be absolutely sure about typos and as I don't think there's a online service that allows several less files and imports, download the example source here - as a matter of fact
.testa{}
won't get rendered at all, but
b.css
naturally has a
.red
class defined.


Edit: When I compile from bash the extend works correctly, but using the less.app GUI or compiling via my IDE (with the same command as from bash) or via a local file watcher the extend does not get included correctly - could this somehow have to do with where the binary gets called from?

Answer

As @seven-phases-max pointed out, the problem is a differing version of the less preprocessor shipped in the GUI tool, which does not have the :extend feature.

Comments