Sass(SCSS)のmixin, include, extendの違い

プログラミング、サーバー、ネットワーク、IT用語、ハマったときのトラブルシューティングなど様々なIT関連の話題をひたすら書いていく技術ブログです。

2017年3月15日水曜日

Sass(SCSS)のmixin, include, extendの違い


Railsなどでscssを使用することが多いと思いますが、@mixin、@include、@extendの違いについてまとめました。

mixinとincludeについて

定義した@mixinを使用するには、@includeが必要となります。引数も使用することができ、さらに初期値を設定しておくことも可能です。



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

BEMの記述があるスタイルを取り込む場合

BEMの記述がある場合、@extendだとうまく反映されないので注意が必要です。@includeで取り込む必要があります。これは@extendはその意味通り「(指定したモノを)拡張する」ので、中心が指定したモノになります。&__はその親を示すので下記の場合だと「side-areaの」という意味になってしまいます。下記の場合はright-areaが親になって欲しいはずなので、@includeを使用します(ですので、取り込まれる箇所は@mixinになります)。@includeだと「何かしらを(@mixin)を取り込んで何かをする」ということなので、中心は取り込んだ側、つまり.right-areaになります。そうすると&__が示す親は.right-area(HTML上のclass="right-area__text"に対応する)となり、BEMもうまく機能します。


extendについて

@extendで取り込むモノには%が付いています。


下記のようになります。






最近の投稿