Sass(Scss)におけるincludeとextendの違い

こんにちは!kossyです!



本日の気になったニュースはこちら
headlines.yahoo.co.jp

納期を守ることは確かにめちゃめちゃ大事だと思います。
例えば私が住宅メーカに一戸建てを発注していて、入居予定日に行ってみたら、
「スンマセン!まだできてないっす!!」
では話にならないですし、プロとして締め切りを遵守することは当然だと思います。

ただ、だからといって、
締め切りを守るために不正を働くことが果たして顧客のためになるかというと、
それは絶対に違うと思います。

おそらく一番初めに不正に手を染めてしまった方は、
様々な葛藤があったかとは思いますが、
お客様のことよりも自分の保身のことを考えてしまっていたのかもしれません。

「人の振り見て我が振り直せ」
働いていく以上他人事ではなくなることもあるかもしれないので、
肝に命じておきたいと思います。









さて、今回はSassにおけるincludeとextendの挙動の違いをブログに残してみたいと思います。


挙動の違いを言語化すると、その違いは、

「継承」 「関数」

という言葉に行き着きます。



extendの挙動をコードで表現すると、

.box {
	height: 50px;
        width: 50px;
}

// .box で使ったスタイルを継承
.bluebox {
	@extend .box;
        border: 1px solid #blue;
}

cssコンパイルすると

.box, .bluebox {
  height: 50px;
  width: 50px;
  border: 1px solid #blue;
}

.bluebox {
  border: 1px solid #blue;
}

もともと定義していたblueboxが残っていますね。


includeの挙動をコードで表現すると、

@mixin itembox($color) {
  width: 50px;
  height: 50px;
  baclground: $color;
}

.box {
  @include itembox(blue)
}

cssコンパイル後は

.box {
  width: 50px;
  height: 100px;
  baclground: #blue;
}

extendの場合は、もともと定義していたblueboxクラスが残るのに対して、
includeの場合は、blueboxクラスを用意することなく作成できます。