Less extend function with concateneted selector (&-) not working

Question

I wanted to do some things with LESS but it's not working as I want. I have this code :

.pl, #pl {
    &-logo {
        max-width: 100%;
        height: auto;

        &-test1:extend(.pl-logo) {
          background-image: url('url');
        }

        &-test2:extend(.pl-logo) {
          background-image: url('url');
        }

        &-test3:extend(.pl-logo) {
          background-image: url('url');
        }
    }
}

But it's not working, I just have :

.pl-logo, #pl-logo {
    max-width: 100%;
    height: auto;
}

.pl-logo-test1, #pl-logo-test1 {
    background-image: url('url');
}

.pl-logo-test2, #pl-logo-test2 {
     background-image: url('url');
 }

.pl-logo-test3, #pl-logo-test3 {
   background-image: url('url');
}

Instead :

.pl-logo, .pl-logo-test1, .pl-logo-test2, .pl-logo-test3, #pl-logo {
    max-width: 100%;
    height: auto;
}

.pl-logo-test1, #pl-logo-test1 {
    background-image: url('url');
}

.pl-logo-test2, #pl-logo-test2 {
     background-image: url('url');
 }

.pl-logo-test3, #pl-logo-test3 {
   background-image: url('url');
}

I thought LESS more evolutive, is my code wrong or LESS does not compile correctly ?

Is there an other way to do what I want ?

Thank you

This is a known behavior. Please refer to [this thread](http://stackoverflow.com/questions/24879871/how-do-i-extend-a-class-mixin-which-has-dynamically-formed-selector/26450099#26450099). — Harry, May 05 '15 at 05:52
Well.. I'll stay tune of LESS changes. Thank you for the thread ! — Timtim, May 05 '15 at 05:57
Cause the main question seems: "Is there an other way to do what I want ?" i think that @Harry correctly point to http://stackoverflow.com/questions/24879871/how-do-i-extend-a-class-mixin-which-has-dynamically-formed-selector/26450099, but i wonder if the question is a real duplicate too — Bass Jobsen, May 05 '15 at 17:32

score 2 · Answer 1 · edited May 23 '17 at 12:22

As already made clear by Harry, you can not extend dynamically formed selectors and How do I extend a class/mixin which has dynamically formed selector will provide you some solutions.

Alternatively you could try to change your HTML and use two classes the .pl-logo, #pl-logo base classes and the test* style classes:

< class="pl-logo test2">

Now you can use the following Less code:

.pl, #pl {
    &-logo {
        max-width: 100%;
        height: auto;

        &.test1 {
          background-image: url('url');
        }

        &.test2 {
          background-image: url('url');
        }

        &.test3 {
          background-image: url('url');
        }
    }
}

Th above compiles into CSS as follows:

.pl-logo,
#pl-logo {
  max-width: 100%;
  height: auto;
}
.pl-logo.test1,
#pl-logo.test1 {
  background-image: url('url');
}
.pl-logo.test2,
#pl-logo.test2 {
  background-image: url('url');
}
.pl-logo.test3,
#pl-logo.test3 {
  background-image: url('url');
}

In the above .pl-logo.test1 means having both the pl-logo and test1 classes. (#pl-logo.test1 having id=pl-logo and class=test1, see: How to combine class and ID in CSS selector?)

Or when you can not change your HTML use attribute selectors:

    [class^="pl-logo-"], [class*=" pl-logo-"], [id^="pl-logo-"], [id*=" pl-logo-"] {
                max-width: 100%;
                height: auto;
        }
.pl, #pl {
    &-logo {
        &.test1 {
          background-image: url('url');
        }

        &.test2 {
          background-image: url('url');
        }

        &.test3 {
          background-image: url('url');
        }
    }
}

Less extend function with concateneted selector (&-) not working

1 Answers1