組み込みモジュール

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、@use を使用した組み込みモジュールの読み込みをサポートしているのは Dart Sass のみです。他の実装を使用しているユーザーは、代わりにグローバル名を付けて関数を呼び出す必要があります。

Sass は、便利な関数（と時折ミックスイン）を含む多くの組み込みモジュールを提供します。これらのモジュールは、ユーザー定義のスタイルシートと同様に、@use ルールを使用して読み込むことができ、その関数は他のモジュールメンバーと同様に呼び出すことができます。すべての組み込みモジュールURLは、Sass自体の一部であることを示すためにsass:で始まります。

⚠️ 注意！

Sassモジュールシステムが導入される前は、すべてのSass関数は常にグローバルに利用可能でした。多くの関数はグローバルエイリアスをまだ持っています（これらはドキュメントに記載されています）。Sassチームはそれらの使用を推奨しておらず、最終的にはそれらを非推奨にする予定ですが、現時点では古いSassバージョンや（まだモジュールシステムをサポートしていない）LibSassとの互換性のために利用可能です。

いくつかの関数は、新しいモジュールシステムでもグローバルでのみ利用可能です。これは、特別な評価動作を持つため(if())、または組み込みCSS関数の上に追加の動作を追加するため(rgb()とhsl())です。これらは非推奨にはならず、自由に使用できます。

  SCSS

  Sass

  CSS

       PlaygroundSCSS構文@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

       PlaygroundSass構文@use "sass:color"

.button
  $primary-color: #6b717f
  color: $primary-color
  border: 1px solid color.scale($primary-color, $lightness: 20%)

CSS出力.button {
  color: #6b717f;
  border: 1px solid rgb(135.1641025641, 140.8256410256, 154.0358974359);
}

Sassは以下の組み込みモジュールを提供します

sass:mathモジュールは、数値を操作する関数を提供します。
sass:stringモジュールは、文字列の結合、検索、分割を容易にします。
sass:colorモジュールは、既存の色に基づいて新しい色を生成し、カラースキームの作成を容易にします。
sass:listモジュールを使用すると、リスト内の値にアクセスして変更できます。
sass:mapモジュールを使用すると、マップ内のキーに関連付けられた値を検索するなど、多くのことができます。
sass:selectorモジュールは、Sassの強力なセレクターエンジンへのアクセスを提供します。
sass:metaモジュールは、Sassの内部動作の詳細を公開します。

グローバル関数グローバル関数パーマリンク

💡豆知識

グローバルカラーコンストラクターの引数の代わりに、calc()やvar()などの特殊関数を渡すことができます。複数の値で置き換えられる可能性があるため、複数の引数の代わりにvar()を使用することもできます！カラー関数がこのように呼び出されると、呼び出されたのと同じシグネチャを使用して引用符なしの文字列を返します。

SCSS

Sass

     PlaygroundSCSS構文@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach)); // color(display-p3 var(--peach))

     PlaygroundSass構文@debug rgb(0 51 102 / var(--opacity))  // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach))  // color(display-p3 var(--peach))

color($space $channel1 $channel2 $channel3)
color($space $channel1 $channel2 $channel3 / $alpha) //=> color

Dart Sass: 1.78.0以降
LibSass: ✗
Ruby Sass: ✗

指定されたカラースペースで、指定されたチャンネル値を持つ色を返します。

これは、srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、およびxyz-d50、ならびにxyzのエイリアスであるxyz-d65というカラースペースをサポートしています。すべてのスペースについて、チャンネルは0〜1（を含む）の数値、または0%〜100%（を含む）のパーセンテージです。

カラチャネルが0〜1の範囲外にある場合、これはカラースペースの標準的な色域外のカラーを表します。

  SCSS

  Sass

       PlaygroundSCSS構文@debug color(srgb 0.1 0.6 1); // color(srgb 0.1 0.6 1)
@debug color(xyz 30% 0% 90% / 50%); // color(xyz 0.3 0 0.9 / 50%)

       PlaygroundSass構文@debug color(srgb 0.1 0.6 1)  // color(srgb 0.1 0.6 1)
@debug color(xyz 30% 0% 90% / 50%)  // color(xyz 0.3 0 0.9 / 50%)

hsl($hue $saturation $lightness)
hsl($hue $saturation $lightness / $alpha)
hsl($hue, $saturation, $lightness, $alpha: 1)
hsla($hue $saturation $lightness)
hsla($hue $saturation $lightness / $alpha)
hsla($hue, $saturation, $lightness, $alpha: 1) //=> color

Dart Sass: 1.15.0以降
LibSass: ✗
Ruby Sass: ✗

LibSassとRuby Sassは、以下のシグネチャのみをサポートします。

hsl($hue, $saturation, $lightness)
hsla($hue, $saturation, $lightness, $alpha)

これらの実装では、関数名hsla()が使用されている場合、$alpha引数は必須であり、関数名hsl()が使用されている場合は禁止されていることに注意してください。

Dart Sass: ✓
LibSass: ✗
Ruby Sass: 3.7.0以降

LibSassと旧バージョンのRuby Sassは、パーセンテージで指定されたアルファ値をサポートしていません。

指定された色相、彩度、明度と、指定されたアルファチャンネルを持つ色を返します。

色相は0degから360deg（を含む）の数値であり、単位がない場合があります。彩度と明度は通常、0%から100%（を含む）の数値であり、単位がない場合があります。アルファチャンネルは、0から1（を含む）の単位のない数値、または0%から100%（を含む）のパーセンテージのいずれかで指定できます。

0degと360degの外側の色相は、$hue % 360degと同等です。0%未満の彩度は0%にクランプされます。100%を超える彩度または0%と100%の外側の明度はどちらも許可されており、標準RGB色域外のカラーを表します。

⚠️ 注意！

スラッシュで区切られた値に対するSassの特殊な解析ルールにより、hsl($hue $saturation $lightness / $alpha)シグネチャを使用する場合、$lightnessまたは$alphaの変数を渡すのが困難になります。代わりにhsl($hue, $saturation, $lightness, $alpha)を使用することを検討してください。

  SCSS

  Sass

       PlaygroundSCSS構文@debug hsl(210deg 100% 20%); // #036
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(241.74, 235.552, 227.46, 0.2)

       PlaygroundSass構文@debug hsl(210deg 100% 20%) // #036
@debug hsl(210deg 100% 20% / 50%)  // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2)  // rgba(241.74, 235.552, 227.46, 0.2)

if($condition, $if-true, $if-false)

$conditionが真の場合、$if-trueを返し、それ以外の場合は$if-falseを返します。

この関数は、返されない引数を評価しないという点で特殊であり、使用されていない引数がエラーをスローする場合でも安全に呼び出すことができます。

  SCSS

  Sass

       PlaygroundSCSS構文@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

       PlaygroundSass構文@debug if(true, 10px, 15px)  // 10px
@debug if(false, 10px, 15px)  // 15px
@debug if(variable-defined($var), $var, null)  // null

hwb($hue $whiteness $blackness)
hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue $whiteness $blackness)
color.hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color

Dart Sass: 1.78.0以降
LibSass: ✗
Ruby Sass: ✗

指定された色相、白さ、黒さと、指定されたアルファチャンネルを持つ色を返します。

色相は0degから360deg（を含む）の数値であり、単位がない場合があります。白さと黒さは、通常0%から100%（を含む）の数値であり、単位がない場合があります。アルファチャンネルは、0から1（を含む）の単位のない数値、または0%から100%（を含む）のパーセンテージのいずれかで指定できます。

0degと360degの外側の色相は、$hue % 360degと同等です。$whiteness + $blackness > 100%の場合、2つの値は合計が100%になるようにスケーリングされます。$whiteness、$blackness、またはその両方が0%未満の場合、これは標準RGB色域外のカラーを表します。

⚠️ 注意！

color.hwb()のバリアントは非推奨です。新しいSassコードでは、代わりにグローバルなhwb()関数を使用する必要があります。

  SCSS

  Sass

       PlaygroundSCSS構文@debug hwb(210deg 0% 60%); // #036
@debug hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)

       PlaygroundSass構文@debug hwb(210deg 0% 60%)  // #036
@debug hwb(210 0% 60% / 0.5)  // rgba(0, 51, 102, 0.5)

if($condition, $if-true, $if-false)

$conditionが真の場合、$if-trueを返し、それ以外の場合は$if-falseを返します。

  SCSS

  Sass

       PlaygroundSCSS構文@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

       PlaygroundSass構文@debug if(true, 10px, 15px)  // 10px
@debug if(false, 10px, 15px)  // 15px
@debug if(variable-defined($var), $var, null)  // null

lab($lightness $a $b)
lab($lightness $a $b / $alpha) //=> color

Dart Sass: 1.78.0以降
LibSass: ✗
Ruby Sass: ✗

指定された[明度、a、b]とアルファチャンネルを持つ色を返します。

明度は0%から100%（を含む）の数値であり、単位がない場合があります。aとbのチャンネルは、単位のない数値（-125〜125を含む）または-100%から100%（を含む）のパーセンテージのいずれかで指定できます。アルファチャンネルは、0から1（を含む）の単位のない数値、または0%から100%（を含む）のパーセンテージのいずれかで指定できます。

0%と100%の範囲外の明度は、その範囲内にクランプされます。aまたはbチャンネルが-125から125の範囲外にある場合、これは標準CIELAB色域外のカラーを表します。

  SCSS

  Sass

       PlaygroundSCSS構文@debug lab(50% -20 30); // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5); // lab(80% 0 25 / 0.5);

       PlaygroundSass構文@debug lab(50% -20 30)  // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5)  // lab(80% 0 25 / 0.5);

lch($lightness $chroma $hue)
lch($lightness $chroma $hue / $alpha) //=> color

Dart Sass: 1.78.0以降
LibSass: ✗
Ruby Sass: ✗

指定された[明度、彩度、色相]と、指定されたアルファチャンネルを持つ色を返します。

明度は0%から100%（を含む）の数値であり、単位がない場合があります。彩度チャンネルは、単位のない数値（0〜150を含む）または0%から100%（を含む）のパーセンテージのいずれかで指定できます。色相は0degから360deg（を含む）の数値であり、単位がない場合があります。アルファチャンネルは、0から1（を含む）の単位のない数値、または0%から100%（を含む）のパーセンテージのいずれかで指定できます。

0%と100%の範囲外の明度は、その範囲内にクランプされます。0未満の彩度は0にクランプされ、150を超える彩度は標準CIELAB色域外のカラーを表します。0degと360degの外側の色相は、$hue % 360degと同等です。

  SCSS

  Sass

       PlaygroundSCSS構文@debug lch(50% 10 270deg); // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5); // lch(80% 75 72deg / 0.5);

       PlaygroundSass構文@debug lch(50% 10 270deg)  // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5)  // lch(80% 75 72deg / 0.5);

oklab($lightness $a $b)
oklab($lightness $a $b / $alpha) //=> color

Dart Sass: 1.78.0以降
LibSass: ✗
Ruby Sass: ✗

指定された知覚的に均一な明度、a、bとアルファチャンネルを持つ色を返します。

明度は0%から100%（両端を含む）の数値で、単位を省略できます。aチャネルとbチャネルは、単位なしの-0.4から0.4（両端を含む）の数値、または-100%から100%（両端を含む）のパーセンテージで指定できます。アルファチャネルは、単位なしの0から1（両端を含む）の数値、または0%から100%（両端を含む）のパーセンテージで指定できます。

明度が0%から100%の範囲外の場合は、その範囲内にクランプされます。aチャネルまたはbチャネルが-0.4から0.4の範囲外の場合は、標準Oklabの色域外のカラーを表します。

  SCSS

  Sass

       PlaygroundSCSS構文@debug oklab(50% -0.1 0.15); // oklab(50% -0.1 0.15)
@debug oklab(80% 0% 20% / 0.5); // oklab(80% 0 0.08 / 0.5)

       PlaygroundSass構文@debug oklab(50% -0.1 0.15)  // oklab(50% -0.1 0.15)
@debug oklab(80% 0% 20% / 0.5)  // oklab(80% 0 0.08 / 0.5)

oklch($lightness $chroma $hue)
oklch($lightness $chroma $hue / $alpha) //=> color

Dart Sass: 1.78.0以降
LibSass: ✗
Ruby Sass: ✗

与えられた[知覚的に均一な明度、彩度、色相]とアルファチャネルを持つカラーを返します。

明度は0%から100%（両端を含む）の数値で、単位を省略できます。彩度チャネルは、単位なしの0から0.4（両端を含む）の数値、または0%から100%（両端を含む）のパーセンテージで指定できます。色相は0degから360deg（両端を含む）の数値で、単位を省略できます。アルファチャネルは、単位なしの0から1（両端を含む）の数値、または0%から100%（両端を含む）のパーセンテージで指定できます。

明度が0%から100%の範囲外の場合は、その範囲内にクランプされます。彩度が0未満の場合は0にクランプされ、0.4を超える彩度は標準Oklabの色域外のカラーを表します。色相が0degから360degの範囲外の場合は、$hue % 360degと等価になります。

  SCSS

  Sass

       PlaygroundSCSS構文@debug oklch(50% 0.3 270deg); // oklch(50% 0.3 270deg)
@debug oklch(80% 50% 0.2turn / 0.5); // oklch(80% 0.2 72deg / 0.5);

       PlaygroundSass構文@debug oklch(50% 0.3 270deg)  // oklch(50% 0.3 270deg)
@debug oklch(80% 50% 0.2turn / 0.5)  // oklch(80% 0.2 72deg / 0.5);

rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha) //=> color

Dart Sass: 1.15.0以降
LibSass: ✗
Ruby Sass: ✗

LibSassとRuby Sassは、以下のシグネチャのみをサポートします。

rgb($red, $green, $blue)
rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

これらの実装では、関数名rgba()を使用する場合は$alpha引数が必須であり、関数名rgb()を使用する場合は禁止されていることに注意してください。

Dart Sass: ✓
LibSass: ✗
Ruby Sass: 3.7.0以降

LibSassと旧バージョンのRuby Sassは、パーセンテージで指定されたアルファ値をサポートしていません。

$red、$green、$blue、およびオプションで$alphaが渡された場合は、指定された赤、緑、青、およびアルファチャネルを持つカラーを返します。

各チャネルは、単位なしの0から255（両端を含む）の数値、または0%から100%（両端を含む）のパーセンテージで指定できます。アルファチャネルは、単位なしの0から1（両端を含む）の数値、または0%から100%（両端を含む）のパーセンテージで指定できます。

いずれかのカラーチャネルが0から255の範囲外の場合は、標準RGBの色域外のカラーを表します。

⚠️ 注意！

Sassのスラッシュで区切られた値に関する特殊な構文解析ルールにより、rgb($red $green $blue / $alpha)シグネチャを使用する場合、$blueまたは$alphaの変数を渡すことが困難になります。代わりにrgb($red, $green, $blue, $alpha)を使用することを検討してください。

  SCSS

  Sass

       PlaygroundSCSS構文@debug rgb(0 51 102); // #036
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)

       PlaygroundSass構文@debug rgb(0 51 102)  // #036
@debug rgb(95%, 92.5%, 89.5%)  // #f2ece4
@debug rgb(0 51 102 / 50%)  // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2)  // rgba(242, 236, 228, 0.2)

$colorと$alphaが渡された場合は、元のアルファチャネルではなく、指定された$alphaチャネルを持つ$colorを返します。

  SCSS

  Sass

       PlaygroundSCSS構文@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366

       PlaygroundSass構文@debug rgb(#f2ece4, 50%)  // rgba(242, 236, 228, 0.5)
@debug rgba(rgba(0, 51, 102, 0.5), 1)  // #003366

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド