Sass:extendでtransition設定を共用

goto_jp 231views 更新:2014年6月27日

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設定の記述量が大幅に減ることになります。

 

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません