Sass：extendでtransition設定を共用

Sassのextendを使って、transition設定を使いまわしましょう。

Sass

.transition3 {
  @include transition(.3s);
}
a {
  @extend .transition3;
  color: #099;
  &:hover {
    color: #6cc;
  }
}
.btn {
  @extend .transition3;
  background-color: #099;
  &:hover {
    background-color: #6cc;
  }
}

「.transition3」という汎用クラスを定義し、その後それらをextendしています。

出力されるCSS

.transition3, a, .btn {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

a {
  color: #099;
}
a:hover {
  color: #6cc;
}

.btn {
  background-color: #099;
}
.btn:hover {
  background-color: #6cc;
}

extendを使い「.transition3」のセレクタに「a」タグと「.btn」クラスが追加される形になるため、transition設定の記述量が大幅に減ることになります。