Hands-On Full Stack Web Development with Aurelia

Extends

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; }