相変わらずの筆不精でまるで更新しない90zbearこと僕です。こんにちわ。

と、そんなわけでSassは便利でよく使っているというか、直でCSSを書くということをもう長い事していない気がするなあ・・・という程度に使っております。

そんなSassの便利な機能、mixinとextend。このあたりはある程度きちんと考えないと最終的に出力されるCSSが地獄のようなことになるのです。

普段から、どんなcssが出力されるのかをしっかり意識しているならば問題はないのですが、先日先生をしている際に、ここのところどう伝えるかなーと考えていたのでメモメモ。

 

mixinとextendのおさらい

Sassの便利な機能の中でも、mixinとextendは結構お世話になるのではないかなと思っています。

ざっくり言えば、関数がmixinで、継承がextend。うん。すまない。そのままなんだ。

mixin

関数をcssで使えるというのは非常に便利だと思って、よく使っている機能です。

@mixin box($bgcolor){
	background-color: $bgcolor;
	border-radius:5px;
}
.box{
	@include mixin(#eee);
}

みたいなscssを書いたら

.box{
	background-color: #eee;
	border-radius:5px;
}

といった感じのcssが出力されるのです。

似たようなものを何度も書くなら、mixinでまとめた方が良いよね。というところでよく使います。

extend

cssでよく使う、カンマ区切りセレクタでいい感じにまとめてくれる機能です。

.hoge{
	background-color:#333; 
	border-radius:5px;
}
.fuga{
	@extend .hoge;
	color: #000;
}

みたいな感じで書くと、

.hoge, .fuga{
	background-color: #333;
	border-radius:5px;
}
.fuga{
	color: #000;
}

といった感じのCSSを出力します。

個人的にこれアツいなーとよく使うのは、セレクタをextendする際に、

%hoge{
	background-color: #333;
	border-radius:5px;
}
.fuga{
	@extend %hoge;
}

.foo{
	@extend %hoge;
}

こんな感じで%から始まるセレクタをextendしたのscssを書くと

.fuga, .foo{
	background-color: #333;
	border-radius:5px;
}

こんな感じで出力されるというやつ。
%のものは出力されないけど、継承元にできるという素敵な機能です。

同じ内容を何度も書くなら、extendでまとめた方が良いよね。というところでよく使います。

 

状況に応じて使うとはいえ、どんな使い分けをするの？という話。

そもそも、性質の違うものではあるのですが、引数を与えられるというメリットを活かすパターンではmixinかなあといったところ。

extendを使った方が短くかける事も多いとはいえ、なんでもかんでもextendではメンテナンスもしにくいですよね。

そこで、自分なりの使い分けをざっくりと。

 

  1. 色や数字のみ変わるパーツはextendではなくmixin。
  2. 不確定で装飾が変わるとはいえ、似たようなパーツはextend。
  3. というか、メンテナンスのしやすさと、最終的に吐き出されるコードを常に意識しながら書いて、失敗を重ねながら覚えればいいと思う。

 

なんだか最後は元も子もない感じになってしまいましたが、基本的にはこんな感じ。

extendをしすぎて、extend地獄にハマる経験の一度や二度は良薬だと思うのでした。。。