Sass:extendでborder-radiusを共用

goto_jp 199views 更新:2014年6月26日

Sassのextendを使って、サイト内でborder-radiusを統一してしまいましょう。

Sass

.border-radius-s {
  @include border-radius(3px);
}
.border-radius-circle {
  @include border-radius(50%);
}

.box1 {
  @extend .border-radius-s;
  width: 100px;
}
.box2 {
  @extend .border-radius-s;
  width: 500px;
}
.circle {
  @extend .border-radius-circle;
  width: 50px;
  height: 50px;
}

まず「.border-radius-s」と「.border-radius-circle」といった汎用クラスを定義し、その後それらをextendしています。

出力されるCSS

.border-radius-s, .box1, .box2 {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}

.border-radius-circle, .circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.box1 {
  width: 100px;
}

.box2 {
  width: 500px;
}

.circle {
  width: 50px;
  height: 50px;
}

Sass側の「@include border-radius()」でベンダープレフィックス付きの記述を出力しますが、これをクラスごとに記述すると出力されるCSSのサイズがかさみます。

extendを使うことで宣言元のセレクタにクラス名を含めることができるため記述量が減ります。

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

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

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