<button class="button">
  普通按钮
</button>
<button class="button--blue">
  蓝色按钮
</button>
<button class="button--red">
  红色按钮
</button>
<button class="button--blue--large">
  蓝色大按钮
</button>
$blue-color: #29abe0;
$red-color: #ff3328;
.button{
  font-size: 14px;
  &--blue{
    @extend .button;
    background-color: $blue-color;
    @at-root &--large{
      font-size: 18px;
      background-color: $blue-color;
    }
  }
  &--red{
    @extend .button;
    background-color: $red-color;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.