Sassで@extend

@extendを使えば、あるスタイルを定義したルールセットの内容を継承しつつプロパティを追加・変更して、新しいルールセットを作ることができます。

@extendの使いどころ

共通するプロパティをひな形のルールセットにして、差分だけを別のルールセット書き込めば、共通したプロパティを設定しなくても良くなるので、とても管理しやすいファイルになるはずです。 例えば、色違いのボタンを表示するためのCSSなど、共通するプロパティを持ったルールセットが多ければ多いほど「こうかはばつぐんだ」になるはずです。

@import "compass";

.button-base {
  display: block;
  margin: auto;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  @include border-radius(5px);
}
.button-red{
  @extend .button-base; //ここで.button-baseを@extend
  width: 50%;
  color: white;
  background: red;
  &:hover {
    background: orange;
  }
}

.button-blue{
  @extend .button-base; //ここで.button-baseを@extend
  width: 30%;
  color: white;
  padding: .5rem; //プロパティを上書き
  background: blue;
  &:hover {
    background: gray;
  }
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

.button-base, .button-red, .button-blue {
  display: block;
  margin: auto;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.button-red {
  width: 50%;
  color: white;
  background: red;
}
.button-red:hover {
  background: orange;
}

.button-blue {
  width: 30%;
  color: white;
  padding: .5rem;
  background: blue;
}
.button-blue:hover {
  background: gray;
}

この通り、.button-baseでボタンの共通スタイルを設定して@extendすることで、.button-red、.button-blueではボタンの背景色と文字色、幅などを設定してあげるだけ。 ボタンの種類が多くなれば多くなるほど便利になるはずです。 また、@extendしたプロパティーを上書きすることもできるので変更部分だけを適宜書き込めばいいです。