関数

一連の処理を行う複数の命令文の集合体です。
@functionで定義し、関数名()で定義した関数を呼び出（実行）します。
また処理した結果を@returnで返すことができます。
関数の定義は実行時に定義した内容に値を渡すことができる引数を指定することができます。
引数名は$引数名と先頭にダラーを付けた名前で指定します。

構文：定義

							引数なし：
							@function 関数名() {

							    内容

							    @return 戻り値;

							}
							引数あり：
							@function 関数名($引数名) {

							    内容

							    @return 戻り値;

							}
							引数の初期値指定あり：
							@function 関数名($引数名:初期値) {

							    内容

							    @return 戻り値;

							}
							引数の複数指定：
							@function 関数名($引数名n, $引数名n:初期値) {

							    内容

							    @return 戻り値;

							}

構文：呼び出し

							引数なし：
							関数名();
							引数あり：
							関数名(渡す値);
							引数名指定：
							関数名(引数名:渡す値);
							複数：
							関数名(渡す値, 引数名:渡す値);

サンプルコード

SCSS

// 定義
@function foo($value) {
    @if ($value == 0) {
        $value = 20px;
    }
 
    @return $value / 2;
}
 
.sample1 {
    // 呼び出し（引数なし）
    width:foo();
}
 
.sample2 {
    // 呼び出し（引数あり）
    width:foo(100px);
}
 
.sample3 {
    // 呼び出し（引数名を指定）
    width:foo($value:150px);
}

CSS（コンパイル後）

.sample1 {
    width:10px;
}
 
.sample2 {
    width:50px;
}
 
.sample3 {
    width:75px;
}

SASS・SCSS逆引きリファレンス一覧へ戻る