Learn LESS CSS extend | extend in less tutorials example

extend is a keyword in LESS and pseudo-class used to inherit the properties of one CSS selector to another selector. It is used to apply the same set of selector attributes in multiple places and enables DRY and inheritance principles.

SASS also has a feature extend placeholder placeholder with the same features.

LESS CSS provides an extended ruleset to reuse selector attributes across multiple places

Let’s declare button styles and these are basic styles for a button.

.button {
    font: weight 400px;
    border-radius: 4px;
  }

  .button:hover {
    color : grey;
  }

Let’s extend the .button selector and declare primary and second versions of a button as follows.

 .button-primary{
    color:green;
    &:extend(.button);
  }
  .button-secondary{
    color:blue;
    &:extend(.button);
  }

And the generated output is

.button,
.button-primary,
.button-secondary {
font: weight 400px;
border-radius: 4px;
}
.button:hover {
color: grey;
}
.button-primary {
color: green;
}
.button-secondary {
color: blue;
}

.button selectors properties merged to extended class where extend keyword is used.

LESS - Extend