本文へジャンプ

Sass解説 - extend, mixin, function

Posted by Namio Araki

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

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ファイルを触るサイトなどでは、分けて書き出したほうが良い場合もあるかもしれません。

  1. 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タイムを。

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
2017年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
スマートフォンやタブレットに最適化されたWebサイトを制作します。
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr