Sass：extendでborder-radiusを共用

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を使うことで宣言元のセレクタにクラス名を含めることができるため記述量が減ります。