An alternative to including a mixin with predefined properties is to extend classes. It defines a new class that inherits all the properties of another class. The following is an example:
.emphasis {
font-weight: bold;
background-color: #ffffaa;
font-size: emCalc(24);
}
.special-emphasis {
@extend .emphasis;
color: blue;
}The preceding SCSS code compiles into the following CSS:
.emphasis, .special-emphasis {
font-weight: bold;
background-color: #ffffaa;
font-size: 1.5em; }
.special-emphasis {
color: blue; }Now we can use special-emphasis and it will have all the characteristics of emphasis and the additional property of blue text.
One thing that's beautiful about the @extend directive is that it extends all the occurrences of a class. When we included the grid-row() mixin in the main-container class, that only made the main-container class equivalent to the row class by itself. There is another class in our website that needs to be equivalent to an inner...