Sass:extendでbox-sizingを共用

goto_jp 285views 更新:2014年6月25日

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 をスタイル定義しているセレクタへクラス名を追加できるので記述量が減ります。

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

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

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