Sassの書き方（オリジナルの関数を作る）

オリジナルの関数を作る

Sassが標準で用意している関数で必要なものがないときは@functionを使ってオリジナルの関数を作ることができます。

関数を作るときは「@function　関数名 { 関数の内容 }」の形で書きます。
また、関数の最後は必ず@returnを書く必要があります。

以下の例では引数のないjustHello関数、2つの引数を持つsumVariables関数、引数が1つ以上あるsumVariables2関数の3種類の関数を作成して、実行してみた結果を@debugで出力します。

style.scss

// 引数のない関数
@function justHello {
	@return "Hello";
}

// 引数が2つある関数
@function sumVariables( $number1:0, $number2:0) {
	@return $number1 + $number2;
}

// 引数が0個以上ある関数
@function sumVariables2($numbers...) {

	$res: 0;

	@each $v in $numbers {
		$res: $res + $v;
	}

	@return $res;
}

@debug justHello(); // DEBUG: Hello
@debug sumVariables( 500, 200); // DEBUG: 700
@debug sumVariables( 100, 200, 300, 400, 500); // DEBUG: 1500

2つ目の関数では「引数名　: 初期値」で初期値を設定しています。
もし関数を呼び出したときに値が渡されなかったときは初期値の「0」を使って実行します。

3つ目の関数は引数の数が0個以上ある場合の設定になっています。
引数で渡せる値の数が固定にならないときに便利な設定で、引数の変数名の後ろに「…」を記述します。

すでに同じ名前の関数があるか確認する

作成しようとしている関数の名前がすでに他で使われていないか調べたいときはfunction-existsメソッドで調べることができます。

style.scss

@debug function-exists(sumVariables);  // DEBUG: false

@function sumVariables( $number1:0, $number2:0) {
	@return $number1 + $number2;
}

@debug function-exists(sumVariables); // DEBUG: true

@if function-exists(min) {
	@warn "その関数名はすでに使われています";
}

ただし、@ifの中に@functionを書くことは文法上できないため、以下のようなコードはエラーが発生します。

style.scss

@function sumVariables( $number1:0, $number2:0) {
	@return $number1 + $number2;
}

@if function-exists(sumVariables) { // エラー
	@function sumVariables($numbers...) {

		$res: 0;

		@each $v in $numbers {
			$res: $res + $v;
		}

		@return $res;
	}
}

function-existsメソッドで関数名の重複を確認してから関数を作るようなコードを書くことはできません。
Sassは不特定多数のユーザーの環境で実行されるものではないため、関数名の重複をあらかじめ確認したいときは上記のように@warnや@errorを使ってコンパイル時に出力されるメッセージから確認します。

また、Sassでは同じ関数名で2つ以上の関数を作成した場合、最後に定義された関数で内容を上書きします。
この性質から、標準では関数名の重複や上書きによるエラーは発生しません。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。