CODEWITHSUNDEEP
lessextend
Timtim
Timtim

Reputation: 344

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

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

Upvotes: 2

Views: 142

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

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');
        }
    }
}

Upvotes: 2

Related Questions