組み込み関数と独自の関数定義 ( @function )

メモ：2020-03-04 12:44:37 +0900 JST Category：front-end

Sass では、関数を使うことができます。大きく分けて「組み込み関数」と「独自の関数」の2種類を扱うことができます。どちらの関数も、mixin などと合わせて使うことが多いようです。

組み込み関数

まずは、組み込み関数から見てみます。

用意されている関数の1つにベースとなる色に対して指定した割合で明るくした色を返してくれる lighten() という関数があります。

$color: #337ab7;

a {
  &:hover{
    color: lighten($color, 30%); //-> #9fc4e4 になる
  }
}

引数に基準となる「色」と「何パーセント明るくしたいか」を渡すと、結果として明るくなった「色」を返してくれます。上記例では、「#337ab7」を 30% 明るくした「#9fc4e4」が返されます。

a:hover {
  color: #9fc4e4; }

上記例以外にも文字列や数値等に関する関数が用意されています。（Built-In Modules）

個々の関数は、別途まとめていきたいと思います．．．

Sass では、自前の関数を作成することができます。関数を用意するには、 @function として関数名を続けます。関数名は、組み込み関数とぶつからないように、何らかのプレフィックスを付けることが推奨されています。

また、 @return で何かしらの結果を返します。

例としては良くないかもしれませんが、次の関数は、与えられた色を 20% 暗くした色を返します。

@function _dark($hex) {
  @return darken($hex, 20%);
}

実際に関数を呼び出すには、次のように記述します。

$color: #337ab7;

a {
  &:hover{
    color: _dark($color); //-> #1d4567 になる
  }
}

この SCSS をコンパイルすると次のように 20% 暗くした色が出力されます。

a:hover {
  color: #1d4567; }

関数の引数には、デフォルト値を設定しておくことができます。

次の例では、 _add 関数の2番目の引数「$b」に続いてデフォルト値を 10 に設定するよう「: 10」としています。呼び出し側で引数を省略すると、10 が使用されます。

@function _add($a, $b: 10) {
  @return $a + $b;
}

実際に関数を呼び出すには、次のように記述します。

.c-card {
  margin-left: _add(10px, 5px);
  margin-right: _add(10px); //-> デフォルトの 10 が加算され 20 になる
}

この SCSS をコンパイルすると次のように引数に与える値に応じて結果が返されます。

.c-card {
  margin-left: 15px;
  margin-right: 20px; }

関数の引数の後ろに「…」を付けると、可変長引数として扱うことができます。

@function _sum($values...) {
  $sum: 0;
  @each $value in $values {
    $sum: $sum + $value;
  }
  @return $sum;
}