LESS makes our code organized and easy to maintain a large CSS code. The Extend Feature in less comes in very handy, where you can use it to keep the code organized and avoid repetitive code. With a good understanding of this feature you can make your web design process easier.

The official less css states Extend as “a Less Pseudo-Class which merges the selector it is put on with ones that match what it references“. I have bolded the two important keywords in the statement above, selector and reference. Extend will merge the ruleset of the referenced selector, with the selector where it is mentioned in. This is done only when the referenced selector is defined.

Syntax

The extend can be written in two ways,

It can attached with the selector like shown below

.selector:extend(.reference) {}

Or it can be included inside the selector ruleset

.selector {
  &:extend(.reference);
}

Both the above syntax does the same thing. It is the user’s preference to choose which one to use. I prefer to use the second one, since it is easy and organized.

Example

Let’s look at an example for the extend feature in LESS

// .container a - is the selector
.container a {
  &:extend(.quote); // & equals '.container a'
  color: blue;
  text-decoration: none;
}

// above extend can also be written as shown below,
// but the above code is cleaner and organized
// .container a:extend(.container) {}

// .quote - is the reference
.quote {
  text-decoration: underline;
}

Compiles to

.container a {
  color: blue;
  text-decoration: none;
}
.quote,
.container a {
  text-decoration: underline;
}

Try this
As in the code shown above, we need the text-decoration of the .container a to be as the .quote styles text-decoration, whenever the .quote appears in the page. If .quote does not appear, it must be left to default ruleset (i.e. text-decoration must be left as none, as in .container a). This is achieved through less extend feature.

From the example shown above, the selector is .container a and the reference is .quote. With extend the styles of the .quote is merged with the .container a.

Note: If the .quote selector ruleset is not defined, the extend is skipped and the styles of the .container a is rendered removing the &:extend(.quote) code. Try removing the .quoteruleset completely from the above code and view the output in lesstester.

Extend ‘all’

Extend all is used to match all appearance of the referenced element in a selector. You use this by adding ‘all’ at the end of the referencing element.

Syntax

.selector  {
  &:extend(.reference all);
}
// Or
.selector:extend(.reference all) {}

Example

.main .row {
  color: blue;
  text-decoration: none;
}
.para .row .a {
  color: orange;
}

.table .row {
  &:extend(.row all); // will capture both the ruleset’s defined above
}

Compiles to

.main .row,
.main .table .row {
  color: blue;
  text-decoration: none;
}
.para .row .a,
.para .table .row .a {
  color: orange;
}

Extend with Variables

If a selector contains a variable in it, then extend will not match that selector. That selector will be skipped.

@container: container;

.@{container} a {
  color: blue;
  text-decoration: none;
}

.quote {
  text-decoration: underline;
}

.quote:extend(.container a) {};

Compiles to

.container a {
  color: blue;
  text-decoration: none;
}
.quote {
  text-decoration: underline;
}

Note: Extend does not detect duplicate entries. If the styles to be generated by extend is already present, then the generated styles is appended to it.

Tags: bolder css, css box shadow, css class, css color picker, css display, css font color, css gradient, css important, css inline, css line-height, css login, css media query, css online, css overflow, css selector, css text color, css text-shadow, css transform, css transition, css variables, img center css, inline css, text align css, valid css, what is css