O'Reilly logo

Hands-On Full Stack Web Development with Aurelia by Erikson Haziz Murrugarra Sifuentes, Diego Jose Arguelles Rojas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required