An example of @extend in Sass.

An example of @extend in Sass.

by Ben Clayton

HTML

<div class="info-message">
  <div>message</div>
</div>

<div class="info-error">
  <div>error</div>
</div>

SCSS

.message {
            color: blue;
            border: 1px solid gray;
            background-color:#EEEEEE;
            padding:10px;
            line-height:16px;
            margin-bottom:20px;
            div {
                 line-height:16px;
                 background-color:white;
                 padding:10px;
             }
 
}


.info-message{
  background-color:#EEFFEE;
  @extend .message;
}
.info-error{
  background-color:#FFEEEE;
  @extend .message;
}