Sass：extendでbox-sizingを共用

Sassのextendを使って、何度も同じ記述をするのを削減しましょう。

Sass

.border-box {
  @include box-sizing(border-box);
}
.box1 {
  @extend .border-box;
  width: 100px;
  padding: 10px;
}
.box2 {
  @extend .border-box;
  width: 300px;
  padding: 20px;
}

出力されるCSS

.border-box, .box1, .box2 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box1 {
  width: 100px;
  padding: 10px;
}

.box2 {
  width: 300px;
  padding: 20px;
}

Sass側の「@include box-sizing」でベンダープレフィックス付きの記述を出力しますが、これをクラスごとにやると記述量も増えます。

extendを使うことで、border-box をスタイル定義しているセレクタへクラス名を追加できるので記述量が減ります。