The @extend
directive is used to extend another style. It allows any style to inherit the properties and values defined in another. Suppose there are a few elements to style that
share some characteristics; they are a prime candidate for the @extend
directive. Let's try an abstract example. We need to create a few boxes. A standard box, a success box, an information box, and finally a warning box. Consider this code:
// Box .box { padding: 2em; color: $color10; background-color: $color11; } // Warning Box .warning-box { @extend .box; border: 2px dotted $color1; } // Success Box .success-box { @extend .box; border: 2px dotted $color4; } // Information Box .info-box { @extend .box; border: 2px dotted $color7; }
First there is a style for the basic box, then each variation extends the box but has it's own different color border. This is the CSS code it generates:
.box, .warning-box, .success-box, .info-box { padding: 2em...