MD-Blog_Web Creative

Sassを使い始めたとき、ネストや変数などは比較的わかりやすいのですが、今回は"便利なんだけどイマイチどれを使っていいかわからない"、extend、mixin、functionについて比較したいと思います。

Sassにはもちろん色々な便利機能があるので、Sassで何が出来るのだろう？と探してこの記事に来たヒトは、弊社KentaroのSassを使いたくなる！便利機能をまとめてみました。をご覧ください。
ここでは、Sass（SCSS記法）のextend（継承）、mixin（ミックスイン）、function（自作関数）に絞って紹介してみます。

特にextend、mixinは、どちらを使っても変わらない場合もあり、好みがわかれるかもしれませんが、ここは自分ルールで分けているので、ご容赦を。

extend（継承）

このextend、mixin、functionの中で、まず最初に紹介されているのがextendだと思います。
「継承」と言われると、プログラミングの話かー...と、しきいが高い気もしてきますが、実は使い方は難しくはないです。

Sass

.hoge1 {
    margin:10px 0;
    padding:5px;
}
.hoge2{
  @extend .hoge1;
  padding:0;
}

と書くと、

CSS

.hoge1, .hoge2 {
  margin: 10px 0;
  padding: 5px;
}
.hoge2 {
  padding: 0;
}

となります。

@extendで呼ばれたhoge1の中身がごそっとhoge2にも反映されています。
これだけを見ると、1か所で書けるものを2か所にわけて書くのは非効率！と思うかもしれないですが、1つのクラス内で複数回@extendすることもできますし、@extendしているクラスを@extendすることもできますので、使い方次第で絶大な効果を発揮してくれます。

mixin（ミックスイン）

mixinは、extendとの大きな違いは2つあると思います。細かくはいっぱいあるのですが。

1. extendと違いグルーピングされない

extendの例と同じ内容をmixinで書くと一目瞭然です。

Sass

@mixin hoge {
    margin:10px 0;
    padding:5px;
}
.hoge1{
  @include hoge;
}
.hoge2{
  @include hoge;
  padding:0;
}

と書くと、

CSS

.hoge1 {
  margin: 10px 0;
  padding: 5px;
}
.hoge2 {
  margin: 10px 0;
  padding: 5px;
  padding: 0;
}

となります。
extendで書き出されたCSSと内容は同じなのですが、「.hoge1, .hoge2 {}」のようにグルーピングされません。
この違いだけですと、extendのほうがソースも短くなるのでいいかと思いますが、制作会社がベースをSassで作って、日々の更新はクライアント企業の担当者がCSSファイルを触るサイトなどでは、分けて書き出したほうが良い場合もあるかもしれません。

2. extendと違い引数（パラメータ）を渡すことができる

こちらがミックスインを使う最大の理由になるかと思います。説明するよりも例を見たほうが早いと思いますので、早速書いてみます。

Sass

@mixin hoge($value : 5px) {
    margin:10px 0;
    padding:$value;
}
.hoge1{
  @include hoge;
}
.hoge2{
  @include hoge(0);
}

と書くと、

CSS

.hoge1 {
  margin: 10px 0;
  padding: 5px;
}
.hoge2 {
  margin: 10px 0;
  padding: 0;
}

となります。
出力されるCSSもhoge2に「padding: 5px;」が出力されなくなりすっきりとしたのではないでしょうか。
「$value : 5px」の「5px」は引数の初期値となり、これがセットされていると、上記のように「@include hoge;」と省略して書くことができます。もちろん複数の引数を渡したり、可変長（数が不明）な引数を渡すことも可能ですので、色々な使い方が可能です。

ちょっと癖のある使い方としては、@contentがあります。

• @content

contentは、上と違いブロックコンテントを渡します。何それ？となりそうなので、例から見ていきます。

Sass

@mixin hogeCont{
    .hogeChild{
    margin: 10px 0;
    @content;
  }
}
.hoge1{
  @include hogeCont{
    padding: 5px;
  }
}
.hoge2{
  @include hogeCont{
    padding: 0px;
  }
}

と書くと、

CSS

.hoge1 .hogeChild {
  margin: 10px 0;
  padding: 5px;
}
.hoge2 .hogeChild {
  margin: 10px 0;
  padding: 0;
}

となります。
@contentを使わず、

Sass

@mixin hoge($value : 5px) {
    margin:10px 0;
    padding:$value;
}
.hoge1 .hogeChild{
  @include hoge;
}
.hoge2 .hogeChild{
  @include hoge(0);
}

と書いても同じ内容になりますが、「.hogeChild」を何度も書かなくていいところが美しいかと思います。Sassの解説書などではIEハック用のクラスなどによく使われていますね。

function（自作関数）

最後にfunctionですが、引数などの扱いはmixinと一緒ですが、返すものが値となります。簡単な例ですがファイル名を引数で渡してurlをセットするfunctionは下記になります。

Sass

$hoge:'img/';
$png:'.png';
@function urlPng($fileName) {
  @return url($hoge+$fileName+$png);
}
.hoge1 {
  background:urlPng('test');
}
.hoge2 {
  background:url($hoge+'test'+$png);
}

と書くと、

CSS

.hoge1 {
  background: url("img/test.png");
}
.hoge2 {
  background: url("img/test.png");
}

と「.hoge1」も「.hoge2」も同じになります。「.hoge2」のように直接四則演算を行ったりしてもいいのですが、functionを作ってあげたほうが美しいですね。

まとめ

	静的/動的	引数	グルーピング	返り値
extend	静的	×	○	ブロック
mixin	動的	○	×	ブロック
function	動的	○	-	値

誤解を恐れずに書くと上記のようなイメージがわかり易いんじゃないかと思います。
どうでしょうか。Sassを触りだしてもう一歩踏み出したい！と思っているヒトの助けになれば幸いです。

よきSassタイムを。