CODEWITHSUNDEEP
cssless
Mik378
Mik378

Reputation: 22171

LESS / Is it possible to extend the nearest ancestor that is nested itself?

Is it possible to expect this CSS output:

.a .b { color: green }
.a .c, .b { color: green }

from this LESS code: 

.a {
     .b {
        color: green;
       .c {
         &:extend(.b);
       }
     }
}

In one sentence: can we extend the nearest ancestor that is nested itself?

Upvotes: 1

Views: 116

Answers (1)

helderdarocha
helderdarocha

Reputation: 23637

There is no .b to extend, since :extend will only match the full contextual selector and a .b doesn't exist (only .a .b exists). So :extend(.b) will have no effect.

It will match something if you use :extend(.a .b) since that selector exists. This:

.a {
     .b {
        color: green;
       .c {
         &:extend(.a .b);
       }
     }
}

will result in:

.a .b,
.a .b .c {
  color: green;
}

But you won't obtain the output you suggested since that would require .c to be under .a and not under .b. With this:

.a {
     .b {
        color: green;
     }
    .c {
         &:extend(.a .b);
     }
}

You would obtain the result below, which is closer to what you expect:

.a .b,
.a .c {
  color: green;
}

To obtain the result you expect, you just have to add this (at top-level):

.b:extend(.a .b){}

Upvotes: 2

Related Questions