Parent selectors not working within mixins using (reference)

[luishdez]

Having on mixin.less

.mixin-test() {
  .test {
    color: red;
    &:first-child {
      color: blue;
    }
  }
}

And main.less

@import (reference) "mixin.less";

.mixin-test();

It Outputs:

.test {
  color: red;
}

but if I remove the (reference) it prints

.test {
  color: red;
}
.test:first-child {
  color: blue;
}

lessc 1.7.0 (LESS Compiler) [JavaScript]

Not sure if it's related to: #1851

[aonez]

Same here. If the mixin.less is something like this works:

.mixin-test() {
    .test {
        color: red;
    }
    .test:first-child {
        color: blue;
    }
}

So the point is in reference import only the first level nested rules are used. It goes no deeper than that.

Another example:

less code:

#hola {
    display: block;
    background-color: red;
    height: 30em;
    & > div {
        height: 20em;
        width: 80%;
        background-color: white;
        & > div {
            height: 10em;
            width: 80%;
            background-color: green;
        }
    }
}

html code:

<div id="hola">
    <div>
        <div></div>
    </div>
</div>

You'll only see two of the three divs.

[seven-phases-max]

@aonez Could you elaborate what your second example has to do with (reference)?

[aonez]

Sure, sorry I copy-pasted some code and now it does lack some meaning:

Take a common.less file:

.hola {
    display: block;
    background-color: red;
    height: 30em;
    & > div {
        height: 20em;
        width: 80%;
        background-color: white;
        & > div {
            height: 10em;
            width: 80%;
            background-color: green;
        }
    }
}

Take a someName.less file that imports common.less and uses its classes:

@import 'common';

#hola
{
    .hola;
}

The html page is the same as in my first comment, and will be using the someName.less file:

<link rel="stylesheet/less" type="text/css" href="someName.less"/>
<script type="text/javascript" src="less.min.js"></script>

<div id="hola">
    <div>
        <div></div>
    </div>
</div>

The css output, just using plain import is the expected:

.hola {
  display: block;
  background-color: red;
  height: 30em;
}
.hola > div {
  height: 20em;
  width: 80%;
  background-color: white;
}
.hola > div > div {
  height: 10em;
  width: 80%;
  background-color: green;
}
#hola {
  display: block;
  background-color: red;
  height: 30em;
}
#hola > div {
  height: 20em;
  width: 80%;
  background-color: white;
}
#hola > div > div {
  height: 10em;
  width: 80%;
  background-color: green;
}

Oviously we only need the #hola part in this case, so common.less must be imported using reference:

@import (reference) 'common';

#hola
{
    .hola;
}

The new ouput:

#hola {
  display: block;
  background-color: red;
  height: 30em;
}
#hola > div {
  height: 20em;
  width: 80%;
  background-color: white;
}

As you can see, it lacks any nested rule but the first level. In that case, the code should be:

#hola {
  display: block;
  background-color: red;
  height: 30em;
}
#hola > div {
  height: 20em;
  width: 80%;
  background-color: white;
}
#hola > div > div {
  height: 10em;
  width: 80%;
  background-color: green;
}

It lacks the third div properties:

#hola > div > div {
  height: 10em;
  width: 80%;
  background-color: green;
}

Hope this helps 😄

[seven-phases-max]

I see, thanks. So the second example is just more verbose variant of the original snippet.

[aonez]

You mean it's useless for you?

[seven-phases-max]

I just add a sort-of self-note to save some time when reading this issue in future... (well, honestly, yes, it's sort of useless then since it adds nothing new).

[aonez]

The point is that reference ignores third level and up nested rules, not rules with parent selectors as the tittle of this ticket says.

[seven-phases-max]

The point is that reference ignores third level and up nested rules

But all examples here use parent selector... (i.e. &). So as I said #hola example above is just more verbose version of the initial snippet.
And if you change your example to :

.hola {
    display: block;
    background-color: red;
    height: 30em;
    > div {
        height: 20em;
        width: 80%;
        background-color: white;
        > div {
            height: 10em;
            width: 80%;
            background-color: green;
        }
    }
}

which btw. is equal style (& is redundant there) you'll find it works with (reference) just fine. So I still can't see anything specific about this example. (So it is & issue as the title says).