Less Language Extends

If you have two selectors and want them to have exactly the same declarations in exactly the same order on exactly the same css locations, then you have to makes sure that every ruleset that has one of them contains also another one. Less extend keyword allows you to achieve this without having to manually copy any of these two selectors.

Extend allows you to copy selector into every ruleset that contains some other selector. For example, next less sample copies pre:hover selector into every ruleset containing div pre selector:

pre:hover:extend(div pre) {
  // ... body as usually ...
}

Every page element that matches the pre:hover selector gains all declarations assigned to div pre selector. In that sense, extend brings inheritance into css.

Syntax Overview

The extend is either attached to a selector or placed into a ruleset. It looks like a pseudoclass with selector parameter optionally followed by the keyword all:

• :extend(selector)
• :extend(selector all)

Attached to Selector

Extend attached to a selector looks like an ordinary pseudoclass with selector as a parameter. A selector can contain multiple extend clauses, but it must end after the last one.

• Extend after the selector: pre:hover:extend(div pre).
• Space between selector and extend is allowed: pre:hover :extend(div pre).
• Multiple extends are allowed: pre:hover:extend(div pre):extend(.bucket tr).
• This is NOT allowed: pre:hover:extend(div pre).nth-child(odd). Extend must be last.

If a ruleset contains multiple selectors, any of them can have the extend keyword. Multiple selectors with extend in one ruleset:

.big-bucket:extend(.bucket), .big-bag:extend(.bag), .big-division {
  // body
}

Inside Ruleset

Extend can be placed into rulesets body using &:extend(selector) syntax. Placing extend into a body is a shortcut for placing it into every single selector of that ruleset.

Extend inside a body:

pre:hover, .some-class {
  &:extend(div pre);
}

is exactly the same as adding an extend after each selector:

pre:hover:extend(div pre), .some-class:extend(div pre) {
}

Extend Basics

Extend copies selector it is attached to into rulesets containing selector from the argument. If the style sheet contains no media declarations, the selector is copied into every rulesets containing target selector.

Simple Example:

link:hover { // ruleset with target selector 
  color: blue;
}
.some-class:extend(link:hover) { // selector will be copied into rulesets having link:hover 
  margin: 1 2 3 4;
}
link:hover { // another ruleset with target selector 
  padding: 1 1 1 1;
}

Compiled css:

link:hover, .some-class {
  color: blue;
}
.some-class { 
  margin: 1 2 3 4;
}
link:hover, .some-class {
  padding: 1 1 1 1;
}

Extend is able to match also nested selectors. Following less:

.bucket {
  tr { // nested ruleset with target selector 
    color: blue;
  }
}
.some-class:extend(.bucket tr) { } // nested ruleset is recognized

is compiled into:

.bucket tr, .some-class {
  color: blue;
}

TODO

Extend All

TODO

Extend Inside Media

TODO