Sass and Compass for Designers

Using the @extend directive to extend existing rules

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 ...