Sass：extendでベンダープレフィクス要素を削減する

Sassのextendを使った記法を広めたいのでまたまた応用方法をご紹介します。

改善前CSS

.box1 {
  width: 300px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.box2 {
  width: 400px;
  padding: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.box3 {
  width: 500px;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

ベンダープレフィックスの要る box-sizing や border-radius を多用するとこのような同じ記述の連続になりがちです。
表示には何ら問題ないですがCSSソースに無駄がありますのでコンパクト化してしまいましょう。

Sass

.box-sizing {
  @include box-sizing(border-box);
}
.border-radius4 {
  @include border-radius(4px);
}
.border-radius5 {
  @include border-radius(5px);
}

.box1 {
  width: 300px;
  padding: 10px;
  @extend .box-sizing;
  @extend .border-radius4;
}
.box2 {
  width: 400px;
  padding: 15px;
  @extend .box-sizing;
  @extend .border-radius4;
}
.box3 {
  width: 500px;
  padding: 20px;
  @extend .box-sizing;
  @extend .border-radius5;
}

box-sizing や border-radius だけを適用したextend用のクラスに分けてしまいました。
各boxからはそのクラスをextendする形です。

border-radiusなど数値指定のプロパティもこのように分けておくことで、クラスごとに角丸の数値がまちまちにならずフォーマットを確定しておけるメリットもあります。

出力されるCSS

.box-sizing, .box1, .box2, .box3 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.border-radius4, .box1, .box2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.border-radius5, .box3 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.box1 {
  width: 300px;
  padding: 10px;
}
.box2 {
  width: 400px;
  padding: 15px;
}
.box3 {
  width: 500px;
  padding: 20px;
}

改善前のCSSより全体のサイズが減りました。