Sass:@extend でCSSクラスを統一しよう

あるCSSクラスをベースに、右詰めや左詰めなどバリエーション違いのクラスを作りたいというケースに @extend は使えます。

下記はSass記法例。

.box {
  width: 300px;
  height: 200px;
}
.right-box {
  @extend .box;
  float: right;
  margin: 0 0 20px 20px;
}
.left-box {
  @extend .box;
  float: left;
  margin: 0 20px 20px 0;
}

CSS側には下記のように展開されます。

.box, .right-box, .left-box {
  width: 300px;
  height: 200px;
}
.right-box {
  float: right;
  margin: 0 0 20px 20px;
}
.left-box {
  float: left;
  margin: 0 20px 20px 0;
}

一見 @mixin と大差ないように思えますが、 @mixin は記録したプロパティを使いまわすためのもので、@extend はベースのクラスと統一化するためのものと、概念に差があります。

出力されたCSSも @extend したクラス側にプロパティが書かれるわけでなく、 @extend 元のクラスに追加記述される形なので、CSSソースは @mixin より軽量化されます。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様