sass
関数

構文

• @function関数名（パラメータ）{/ *関数本体* /}

基本機能

関数は、mixinと外観が似ていますが、スタイルを追加するものではなく、値を返します。あなたのスタイルで繰り返されるロジックを防ぐために関数を使うべきです。

Sassには、標準のCSS関数構文を使って呼び出される組み込み関数がいくつかあります。

h1 {
    background: hsl(0, 25%, 50%);
}

関数は以下の構文を使用して宣言され、

@function multiply(x, y) {
    @return x * y;
}

// example use below
h1 {
    margin-top: multiply(10px, 2);
}

上記のコードでは、 @function関数を宣言し、 @return戻り値を意味します。