Can't extend a nested class (concatenated selector) #1597

DennisJohnsen · 2013-10-15T10:53:48Z

Heya guys.

I have found an annoying issue, which is pretty basic use of two mechanics:
I cant extend a class i generate by nesting it using "& {}"

Heres my example:

.box {
    padding: @base-spacing;

    &--large {
        padding: @large-spacing;
    }
}

.foo {
    &:extend(.box--large);
}

Expected result:

.box {
    padding: 24px;
}

.box--large,
.foo {
        padding: 48px;
}

What actually happens:

.box {
    padding: 24px;
}

.box--large {
    padding: 48px;
}

Imo this is very basic use of two mechanics, and it's not like its generated by some kind of wizard looping mixin.
Looking forward to have this fixed :-)

Kind regards, Dennis

jonschlinkert · 2013-10-15T11:45:06Z

#1539

jonschlinkert · 2013-10-15T11:45:16Z

#1554

jonschlinkert · 2013-10-15T11:45:27Z

#1399

lukeapage · 2013-10-15T12:51:50Z

although closest to #1539 i don't think it is a duplicate.. same root cause as #1539 though..

.a {
   &b

is treated as .a followed by a b element, with no space between them
.ab is treated as the class ab.. so less thinks they are different.

quite a hard one to solve, though I guess easier to solve than #1539

jonschlinkert · 2013-10-15T13:00:30Z

fair enough, I guess if solving one doesn't solve the other then it makes sense to keep both open.

DennisJohnsen · 2013-11-20T09:41:51Z

Hello again : - )

I'm just writing to hear if theres some updates regarding this issue.

I have recently forwarded multiple people this issue, regarding to their LESS question about not beeing able to extend nested/generated classes.

Kind regards
Dennis

Johns3n · 2013-11-20T10:01:15Z

+1

I tried doing the exact same thing:

.top{
    &-first{
        background:black;
        &-item{
            color:white;
        }
    }
    &-second{
        background:green;
        &-item:extend(.top-first-item){}
    }
}

expecting:

.top-first {
    background: black;
}
.top-first-item,
.top-second-item{
    color: white;
}
.top-second {
    background: green;
}

But got instead:

.top-first {
    background: black;
}
.top-first-item{
    color: white;
}
.top-second {
    background: green;
}

Soo +1 for this issue and looking forward to a fix! :)

Original: http://stackoverflow.com/questions/20091264/less-extend-a-previously-defined-nested-selector

dvdln · 2013-12-21T04:03:26Z

A lot of people are into BEM these days...

.block {
  &__elem {
    width: 200;
  }

  &__elem_mod_blue {
    &:extend(.block__elem);
    color: blue;
  }

  &__elem_mod_green {
    &:extend(.block__elem);
    color: green;
  }
}

lukeapage · 2013-12-21T09:04:31Z

I guess the easiest way to fix is in the code handling & to change it to combine the value if there are no combinators between the previous value and the next value, then this would work. patches welcome!

DennisJohnsen · 2014-05-17T22:42:49Z

Hello again.

Any updates into this? I havn't been following it for some time, but i find my self not beeing able to extend these dynamic classes a abit too often :(

Kind regards,
Dennis

Johns3n · 2014-05-20T06:36:24Z

Again a +1 from me! Found myself needing to be able to extend a nested dynamic class the other day :)

.ui{
    &__theme{
        background-image:url(../images/watermark.gif);
        background-position:top left;
        background-attachment:fixed;
        background-repeat:no-repeat;
        &--inverted{
            &:extend(.ui__theme);
            background-image:url(../images/watermark--inverted.gif);
            background-position:top right;
        }
    }

expected:

ui__theme, ui__theme--inverted{
   //shared rules
}
ui__theme--inverted{
 //individual
}

slantz · 2014-07-18T13:54:23Z

I've been working on the singlepage project, where each page has it's own less file compiled. Each page has it's own body class, so I can extend concatanated classes and other properties like so:
Let the pages have classes:

<body class="foo-bar-page">
<body class="bar-baz-page">

In my less files i start from not existing classes

.foo-bar {
  &-page {
    min-height:100%;
    #somediv {
      color : red;
    }
    &-holder {
      display : inline-block;
    }
  }  
}

For the other page i can just write:

.bar-baz {
  &:extend(.foo-bar all);
}

And the output will be:

.foo-bar-page,
.bar-baz-page {
  min-height: 100%;
}
.foo-bar-page #somediv,
.bar-baz-page #somediv {
  color: red;
}
.foo-bar-page-holder,
.bar-baz-page-holder {
  display: inline-block;
}

Sure if you need to inherit everything. Less 1.7.0

jaredly · 2014-08-21T20:50:05Z

+1!

seven-phases-max · 2014-09-18T18:43:17Z

Merging to #2200.

guillaume-duchemin · 2018-09-18T14:23:00Z

Hello, I know it's now into #2200 BUT 5 years without solution is it outdated ??

matthew-dean · 2018-09-18T17:38:30Z

@guillaume-duchemin Not out-dated. Marked as up-for-grabs, so anyone can submit a PR for it at anytime.

rejhgadellaa · 2019-07-24T20:47:20Z

+1

kubami19 · 2019-07-31T11:31:41Z

+1

acjbizar · 2019-08-14T11:20:43Z

+1

matthew-dean · 2019-09-19T19:00:37Z

In case someone comes here with a case like @Johns3n's example, you can always just convert that to the following to "share" rules between BEM classes:

.ui {
    &__theme {
        background-image:url(../images/watermark.gif);
        background-position:top left;
        &, &--inverted {
            background-attachment:fixed;
            background-repeat:no-repeat;
        }
        &--inverted {
            background-image:url(../images/watermark--inverted.gif);
            background-position:top right;
        }
    }
}

i.e. the key useful "trick" in Less is the &, &[something] { pattern, where you can abstract common rules without using "extend"

kerryj89 · 2020-04-16T02:52:38Z

This would be a great feature as utility classes become even more popular. I was wanting to remove some utility classes from the markup where the sizing was set in stone. It would've been nice to just drop in &:extend(.padding-left-small); or &:extend(.padding-all-medium-lg-up);. I suppose I could wrap it in a mixin or something? Still, that's not intuitive when we have extends. Thanks for all the work you devs have done, though!

.padding {
  &-left {
    &-small {
        padding-left: @gutter-small !important;
    }
    &-...
  }
  &-...
}

jonschlinkert closed this as completed Oct 15, 2013

lukeapage reopened this Oct 15, 2013

seven-phases-max mentioned this issue Dec 21, 2013

&:extend Interpolated Selectors Not Working #1752

Closed

seven-phases-max mentioned this issue May 22, 2014

Extends, nesting and the & combinator. #1554

Closed

seven-phases-max mentioned this issue Jul 2, 2014

Parent selector combined with hyphen or underscore breaks selector extensibility #2088

Closed

seven-phases-max changed the title ~~Can't extend a nested class~~ Can't extend a nested class (with "concatenated identifier") Aug 21, 2014

seven-phases-max changed the title ~~Can't extend a nested class (with "concatenated identifier")~~ Can't extend a nested class (concatenated identifier) Sep 18, 2014

seven-phases-max mentioned this issue Sep 18, 2014

Extend dynamically generated selectors (summary). #2200

Closed

seven-phases-max closed this as completed Sep 18, 2014

seven-phases-max changed the title ~~Can't extend a nested class (concatenated identifier)~~ Can't extend a nested class (concatenated selector) Sep 18, 2014

kevinmartin mentioned this issue Nov 25, 2014

Unable to use :extend on column classes NEURS/GridIron#4

Closed

matthew-dean reopened this Sep 18, 2018

matthew-dean added the up-for-grabs label Sep 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't extend a nested class (concatenated selector) #1597

Can't extend a nested class (concatenated selector) #1597

DennisJohnsen commented Oct 15, 2013

jonschlinkert commented Oct 15, 2013

jonschlinkert commented Oct 15, 2013

jonschlinkert commented Oct 15, 2013

lukeapage commented Oct 15, 2013

jonschlinkert commented Oct 15, 2013

DennisJohnsen commented Nov 20, 2013

Johns3n commented Nov 20, 2013

dvdln commented Dec 21, 2013

lukeapage commented Dec 21, 2013

DennisJohnsen commented May 17, 2014

Johns3n commented May 20, 2014

slantz commented Jul 18, 2014

jaredly commented Aug 21, 2014

seven-phases-max commented Sep 18, 2014

guillaume-duchemin commented Sep 18, 2018

matthew-dean commented Sep 18, 2018

rejhgadellaa commented Jul 24, 2019

kubami19 commented Jul 31, 2019

acjbizar commented Aug 14, 2019

matthew-dean commented Sep 19, 2019 •

edited

Loading

kerryj89 commented Apr 16, 2020 •

edited

Loading

Can't extend a nested class (concatenated selector) #1597

Can't extend a nested class (concatenated selector) #1597

Comments

DennisJohnsen commented Oct 15, 2013

jonschlinkert commented Oct 15, 2013

jonschlinkert commented Oct 15, 2013

jonschlinkert commented Oct 15, 2013

lukeapage commented Oct 15, 2013

jonschlinkert commented Oct 15, 2013

DennisJohnsen commented Nov 20, 2013

Johns3n commented Nov 20, 2013

dvdln commented Dec 21, 2013

lukeapage commented Dec 21, 2013

DennisJohnsen commented May 17, 2014

Johns3n commented May 20, 2014

slantz commented Jul 18, 2014

jaredly commented Aug 21, 2014

seven-phases-max commented Sep 18, 2014

guillaume-duchemin commented Sep 18, 2018

matthew-dean commented Sep 18, 2018

rejhgadellaa commented Jul 24, 2019

kubami19 commented Jul 31, 2019

acjbizar commented Aug 14, 2019

matthew-dean commented Sep 19, 2019 • edited Loading

kerryj89 commented Apr 16, 2020 • edited Loading

matthew-dean commented Sep 19, 2019 •

edited

Loading

kerryj89 commented Apr 16, 2020 •

edited

Loading