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