@function

関数は、@function <name>(<arguments...>) { ... }と書かれた@function atルールを使用して定義されます。関数の名前は、--で始まらない任意のSass識別子にすることができます。ユニバーサルステートメントと、関数の呼び出しの結果として使用する値を示す@return atルールのみを含めることができます。関数は、通常のCSS関数構文を使用して呼び出されます。

• SCSS
• Sass
• CSS

プレイグラウンド

SCSS構文

@function fibonacci($n) {
  $sequence: 0 1;
  @for $_ from 1 through $n {
    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
    $sequence: append($sequence, $new);
  }
  @return nth($sequence, length($sequence));
}

.sidebar {
  float: left;
  margin-left: fibonacci(4) * 1px;
}

プレイグラウンド

Sass構文

@function fibonacci($n)
  $sequence: 0 1
  @for $_ from 1 through $n
    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1)
    $sequence: append($sequence, $new)
  @return nth($sequence, length($sequence))

.sidebar
  float: left
  margin-left: fibonacci(4) * 1px

CSS出力

.sidebar {
  float: left;
  margin-left: 5px;
}

引数引数パーマリンク

引数を使用すると、関数が呼び出されるたびに動作をカスタマイズできます。引数は、関数の名前の後に@functionルールで、括弧で囲まれた変数名のリストとして指定されます。関数は、SassScript式の形式で同じ数の引数を使用して呼び出す必要があります。これらの式の値は、関数本体内で対応する変数として使用できます。

オプション引数オプション引数パーマリンク

通常、関数が宣言するすべての引数は、その関数が含まれるときに渡す必要があります。ただし、引数が渡されない場合に使用されるデフォルト値を定義することで、引数をオプションにすることができます。デフォルト値は、変数宣言と同じ構文を使用します。変数名、コロン、SassScript式です。これにより、シンプルまたは複雑な方法で使用できる柔軟な関数APIを簡単に定義できます。

• SCSS
• Sass
• CSS

プレイグラウンド

SCSS構文

@function invert($color, $amount: 100%) {
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
  background-color: invert($primary-color, 80%);
}

プレイグラウンド

Sass構文

@function invert($color, $amount: 100%)
  $inverse: change-color($color, $hue: hue($color) + 180)
  @return mix($inverse, $color, $amount)


$primary-color: #036
.header
  background-color: invert($primary-color, 80%)

CSS出力

.header {
  background-color: rgb(81.6, 51, 20.4);
}

キーワード引数キーワード引数パーマリンク

関数が呼び出されると、引数は引数リストの位置で渡すだけでなく、名前で渡すこともできます。これは、複数のオプション引数を持つ関数、または名前がないと意味が不明なブール値引数を持つ関数に特に役立ちます。キーワード引数は、変数宣言およびオプション引数と同じ構文を使用します。

• SCSS
• Sass
• CSS

プレイグラウンド

SCSS構文

$primary-color: #036;
.banner {
  background-color: $primary-color;
  color: scale-color($primary-color, $lightness: +40%);
}

プレイグラウンド

Sass構文

$primary-color: #036
.banner
  background-color: $primary-color
  color: scale-color($primary-color, $lightness: +40%)

CSS出力

.banner {
  background-color: #036;
  color: rgb(10.2, 132.6, 255);
}

任意の引数の取得任意の引数の取得パーマリンク

関数が任意の数の引数を取ることができるようにすることが役立つ場合があります。@function宣言の最後の引数が...で終わる場合、その関数への追加の引数はすべて、リストとしてその引数に渡されます。この引数は、引数リストとして知られています。

• SCSS
• Sass
• CSS

プレイグラウンド

SCSS構文

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

プレイグラウンド

Sass構文

@function sum($numbers...)
  $sum: 0
  @each $number in $numbers
    $sum: $sum + $number

  @return $sum


.micro
  width: sum(50px, 30px, 100px)

CSS出力

.micro {
  width: 180px;
}

任意のキーワード引数の取得任意のキーワード引数の取得パーマリンク

引数リストを使用して、任意のキーワード引数を取ることができます。meta.keywords()関数は、引数リストを取得し、関数に渡された追加のキーワードを、引数名（$を除く）からその引数の値へのマップとして返します。

任意の引数の渡し任意の引数の渡しパーマリンク

引数リストにより、関数が任意の位置引数またはキーワード引数を取ることができるようにするのと同じ構文を使用して、位置引数とキーワード引数を関数に渡すことができます。関数呼び出しの最後の引数としてリストに続いて...を渡すと、その要素は追加の位置引数として扱われます。同様に、マップに続いて...を渡すと、追加のキーワード引数として扱われます。両方同時に渡すこともできます！

• SCSS
• Sass
• CSS

プレイグラウンド

SCSS構文

$widths: 50px, 30px, 100px;
.micro {
  width: min($widths...);
}

プレイグラウンド

Sass構文

$widths: 50px, 30px, 100px
.micro
  width: min($widths...)

CSS出力

.micro {
  width: 30px;
}

💡豆知識

引数リストは位置引数とキーワード引数の両方を追跡するため、これを使用して両方同時に別の関数に渡します。これにより、関数のエイリアスを簡単に定義できます！

• SCSS
• Sass

プレイグラウンド

SCSS構文

@function fg($args...) {
  @warn "The fg() function is deprecated. Call foreground() instead.";
  @return foreground($args...);
}

プレイグラウンド

Sass構文

@function fg($args...)
  @warn "The fg() function is deprecated. Call foreground() instead."
  @return foreground($args...)

@return@returnパーマリンク

@return atルールは、関数を呼び出した結果として使用する値を示します。これは@function本体内でのみ許可され、各@functionは@returnで終わる必要があります。

@returnが検出されると、関数はすぐに終了し、その結果を返します。早期の返却は、エッジケースや、関数を@elseブロックでラップせずに、より効率的なアルゴリズムを使用できる場合に役立ちます。

• SCSS
• Sass

プレイグラウンド

SCSS構文

@use "sass:string";

@function str-insert($string, $insert, $index) {
  // Avoid making new strings if we don't need to.
  @if string.length($string) == 0 {
    @return $insert;
  }

  $before: string.slice($string, 0, $index);
  $after: string.slice($string, $index);
  @return $before + $insert + $after;
}

プレイグラウンド

Sass構文

@use "sass:string"

@function str-insert($string, $insert, $index)
  // Avoid making new strings if we don't need to.
  @if string.length($string) == 0
    @return $insert


  $before: string.slice($string, 0, $index)
  $after: string.slice($string, $index)
  @return $before + $insert + $after

その他の関数その他の関数パーマリンク

ユーザー定義関数に加えて、Sassは常に使用できるコアライブラリのビルトイン関数を多数提供しています。Sassの実装では、ホスト言語でカスタム関数を定義することもできます。そしてもちろん、プレーンCSS関数（奇妙な構文を持つ関数も含む）を常に呼び出すことができます。

プレーンCSS関数プレーンCSS関数パーマリンク

ユーザー定義関数またはビルトイン関数ではない関数呼び出しは、（Sass引数構文を使用しない限り）プレーンCSS関数にコンパイルされます。引数はCSSにコンパイルされ、関数呼び出しにそのまま含まれます。これにより、新しい関数が追加されるたびに新しいバージョンをリリースする必要なく、SassですべてのCSS関数をサポートできます。

• SCSS
• Sass

プレイグラウンド

SCSS構文

@debug var(--main-bg-color); // var(--main-bg-color)

$primary: #f2ece4;
$accent: #e1d7d2;
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)

プレイグラウンド

Sass構文

@debug var(--main-bg-color)  // var(--main-bg-color)

$primary: #f2ece4
$accent: #e1d7d2
@debug radial-gradient($primary, $accent)  // radial-gradient(#f2ece4, #e1d7d2)