Sometimes, you define various classes that share a common definition. With the @extend feature, you can define a common class and make others extend from it instead of copying the same code in each one:
SASS example:
.block { margin: 25px 58px; }
p {
@extend .block;
border: 3px solid #00FF00;
}
ol {
@extend .block;
color: #FF0000;
text-transform: lowercase;
}
LESS:
.block { margin: 25px 58px; }
p {
&:extend(.block);
border: 3px solid #00FF00;
}
ol {
&:extend(.block);
color: #FF0000;
text-transform: lowercase;
}
CSS output:
.block, p, ul, ol { margin: 10px 5px; }
p { border: 1px solid #eee; }
ul, ol { color: #333; text-transform: uppercase; }