MENU


extend

You can 'inherit' the styles of other selectors with extend.
Extending from outside a selector. 
.a {
   color: green;
}
.b:extend(.a){
   background: white;
}

.a,
.b {
  color: green;
}
.b {
  background: white;
}
A nested ruleset is recognized.
.a {
  tr {
    color: blue;
  }
}
.b:extend(.a tr) {}

.a tr,
.b {
  color: blue;
}
The optional 'all' keyword last in an extend argument tells Less to match that selector as part of another selector. 
.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.X:extend(.test all) {}

.a.b.test,
.test.c,
.a.b.X,
.X.c {
  color: orange;
}
.test:hover,
.X:hover {
  color: green;
}
'extend' inside @media matches only selectors within the @media block-level, excluding those within another nested @media within. However,top level 'extend' matches everything including selectors inside nested media.
@media print {
   .screenClass:extend(.a) {} 
   .a { color: black; }
}
.a { color: red; }
@media screen {
   .a { color: blue; }
}


@media screen {
   .b { color: blue; }
   @media (min-width: 1023px) {
      .b { color: blue; }
   }
}
.topLevel:extend(.b) {}

@media print {
  .a,
  .screenClass {
    color: black;
  }
}
.a {
  color: red;
}
@media screen {
  .a {
    color: blue;
  }
}
@media screen {
  .b,
  .topLevel {
    color: blue;
  }
}
@media screen and (min-width: 1023px) {
  .b,
  .topLevel {
    color: blue;
  }
}


The following are equivalent: 
.a:extend(.b) {}
 
.a {
  &:extend(.b);
}
pre:hover:extend(div pre):extend(.bucket tr)
         
pre:hover:extend(div pre, .bucket tr)
         
pre:hover,
.some-class {
  &:extend(div pre);
}
         
pre:hover:extend(div pre),
.some-class:extend(div pre) {}
This is NOT allowed: pre:hover:extend(div pre).nth-child(odd). Extend must be last.

The following won't be matched: 
.a.class,
.class.a,
.class > .a {
  color: blue;
}
.test:extend(.class) {}
   
*.class {
  color: blue;
}
.noStar:extend(.class) {}
   
link:hover:visited {
  color: blue;
}
.selector:extend(link:visited:hover) {}
   
:nth-child(1n+3) {
  color: blue;
}
.child:extend(:nth-child(n+3)) {}
   
@variable: .bucket;
@{variable} {
  color: blue;
}
.some-class:extend(.bucket) {}