Sassでは@mixinの他に、@functionという処理をまとめる機能があります。しかし、通常SassではCSSの機能をまとめることがほとんどであるため使う頻度は少ないかもしれません。@mixinと@functionの違いをざっくりとまとめてみます。

@mixinの役割

@mixinは、CSSの記述を助ける役割が主になっています。CSSで重複した記述を@mixinでまとめることで同じ記述をなくしていけます。今までの記事を見ていただいている方であれば、どんな効果があるのか理解して頂いているかと思います。@mixinに関する記事は以下になります。ぜひ読んでみてください。

「Sassで角丸の矩形を超簡単に記述する方法」
「Sassを使って面倒なCSS3を簡単に書いてしまう – プロパティ名にも変数を使おう」
「Sassを使って矢印を描こう – CSSテクニック」

@functionと@mixinの違い

@functionは、@mixinと比べてかなり限定的な使い方をします。使い方を見てみましょう。

@function testFunction() {
    @return "result";
}

@mixinには無かった「@return」という記述があります。これは、@functionを呼び出している箇所に値を返す、という意味があります。C言語などを触ったことのある方にとってはお馴染みの「return」です。呼び出して使用する場合は以下のように記述します。

testFunction();

@mixinと違い、@includeを使用しません。そして上記の結果、testFunction()を呼び出している箇所には”result”という文字が配置されることになります。基本的に、@mixinで記述されている内容は@returnを使わずともCSSの内容は出力されます。@functionと@mixinはここが違います。@functionは「返す内容を明示的に記述する」必要があるのです。返す内容がはっきりしている計算処理などは、@mixinではなく@functionで計算処理まとめると便利です。

@functionの使用例

上辺の説明だけだと、どんな使い方をするのか分からないので具体的に使用例を見てみましょう。

@mixin squareWidth($num) {
    .testclass {
        width: $num * $num;
    }
}

実際に使用する処理かは置いておいて、引数を二乗してwidthに設定しています。この処理に@functionを付け加えてみましょう。

@function square($num) {
    @return $num * $num;
}

@mixin squareWidth($num) {
    .testclass {
        width: square($num);
    }
}

@functionの意味が理解できたでしょうか。CSSではサイト制作においてmarginの計算など見た目に関する計算を手動で行なっていることが多いかと思います。手動で行なっていた計算の構造自体を@functionでまとめることで、@mixinだけでは出来なかった構造のライブラリ化を進めることができます。

@functionで出来ないこと

@functionは構造をまとめる機能であるため、@mixinのようにCSSの記述をまとめることはできません。例えば以下のようなコードを書いた場合コンパイルエラーとなります。

@function testFunction() {
    .testClass {
        width: 50px;
    }
}

また、@functionを呼び出している箇所も重要となります。@functionは値を返す処理なので、返ってきた値自体が不要な箇所で使用することはできません。

@mixin testMixin() {
    .testClass {
        testFunction();
    }
}

@functionは、「CSSのプロパティ」「@mixin,@functionの引数」「変数」など実際に値が使用される箇所で使用できます。このルールの拘束は強いですが、うまく付き合っていくことでより楽に正確にWEBサイト制作が行えるようになっていくことでしょう。ぜひ使ってみてください。

どこでも@functionを呼び出したい！

@functionによる構造のライブラリ化を進めていくと、「@returnを使わない処理」「変数に入れる必要がない処理」というものがどうしても出てきてしまいます。例えば、引数のエラーIDを指定すると、適切なエラーメッセージを出力するだけの処理などです。そういった場合は以下のようにダミーの@mixinを用意します。

@mixin runFunction($func) {}

ダミーの@mixinは以下のように使用します。

@function testFunction() {
    @return "test";
}

@mixin testMixin() {
    @include runFunction(testFunction());
}

testMixin()関数で使用しているように、runFunction()関数内で@functionを呼び出すことができます。こうすることで、@functionを自由に呼び出せるようになります。なぜこのような処理が出来るのかというと、@mixinの引数が、@functionの返り値を受け取っているためです。受け取った値は使用せずとも、受け取る処理がある箇所で@functionは利用できるためこのような処理を作ることができるのです。また、以下のように@functionを使うこともできます。

$run: testFunction();

こちらは、変数で@functionの返り値を受け取っています。同様に使えるテクニックですので、是非参考にしてみてください。