Eingebaute Module

Dart Sass: seit 1.23.0
LibSass: ✗
Ruby Sass: ✗

Nur Dart Sass unterstützt derzeit das Laden von integrierten Modulen mit @use. Benutzer anderer Implementierungen müssen Funktionen stattdessen über ihre globalen Namen aufrufen.

Sass stellt viele eingebaute Module zur Verfügung, die nützliche Funktionen (und gelegentlich Mixins) enthalten. Diese Module können wie jede benutzerdefinierte Stylesheet mit der @use Regel geladen werden, und ihre Funktionen können wie jedes andere Modulmitglied aufgerufen werden. Alle URLs von eingebauten Modulen beginnen mit sass:, um anzuzeigen, dass sie Teil von Sass selbst sind.

⚠️ Vorsicht!

Bevor das Sass-Modulsystem eingeführt wurde, waren alle Sass-Funktionen jederzeit global verfügbar. Viele Funktionen haben immer noch globale Aliase (diese sind in ihrer Dokumentation aufgeführt). Das Sass-Team rät von ihrer Verwendung ab und wird sie irgendwann als veraltet kennzeichnen, aber vorerst bleiben sie aus Kompatibilitätsgründen mit älteren Sass-Versionen und mit LibSass (das das Modulsystem noch nicht unterstützt) verfügbar.

Einige wenige Funktionen sind auch im neuen Modulsystem *nur* global verfügbar, entweder weil sie ein spezielles Auswertungsverhalten haben (if()) oder weil sie zusätzliche Funktionalität zu den eingebauten CSS-Funktionen hinzufügen (rgb() und hsl()). Diese werden nicht als veraltet gekennzeichnet und können frei verwendet werden.

  SCSS

  Sass

  CSS

       SpielplatzSCSS-Syntax@use "sass:color";

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

       SpielplatzSass-Syntax@use "sass:color"

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

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

Sass bietet die folgenden eingebauten Module

Das sass:math Modul bietet Funktionen, die mit Zahlen arbeiten.
Das sass:string Modul erleichtert das Kombinieren, Suchen oder Aufteilen von Strings.
Das sass:color Modul generiert neue Farben basierend auf bestehenden, was den Aufbau von Farbthemen erleichtert.
Das sass:list Modul ermöglicht den Zugriff auf und die Modifikation von Werten in Listen.
Das sass:map Modul ermöglicht das Nachschlagen des Wertes, der einem Schlüssel in einer Map zugeordnet ist, und vieles mehr.
Das sass:selector Modul bietet Zugriff auf die leistungsstarke Selektor-Engine von Sass.
Das sass:meta Modul legt die Details der internen Arbeitsweise von Sass offen.

Globale FunktionenPermalink zu globalen Funktionen

💡 Lustige Tatsache

Sie können spezielle Funktionen wie calc() oder var() anstelle jedes Arguments für einen globalen Farbkonstruktor übergeben. Sie können sogar var() anstelle mehrerer Argumente verwenden, da es durch mehrere Werte ersetzt werden kann! Wenn eine Farbfunktion auf diese Weise aufgerufen wird, gibt sie einen ungequoteten String mit derselben Signatur zurück, mit der sie aufgerufen wurde.

SCSS

Sass

     SpielplatzSCSS-Syntax@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach)); // color(display-p3 var(--peach))

     SpielplatzSass-Syntax@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: seit 1.78.0
LibSass: ✗
Ruby Sass: ✗

Gibt eine Farbe im angegebenen Farbraum mit den angegebenen Kanalwerten zurück.

Dies unterstützt die Farbräume srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz und xyz-d50, sowie xyz-d65, was ein Alias für xyz ist. Für alle Räume sind die Kanäle Zahlen zwischen 0 und 1 (einschließlich) oder Prozentsätze zwischen 0% und 100% (einschließlich).

Wenn ein Farbkanal außerhalb des Bereichs von 0 bis 1 liegt, repräsentiert dies eine Farbe außerhalb des Standardgamuts für seinen Farbraum.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@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%)

       SpielplatzSass-Syntax@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: seit 1.15.0
LibSass: ✗
Ruby Sass: ✗

LibSass und Ruby Sass unterstützen nur die folgenden Signaturen

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

Beachten Sie, dass für diese Implementierungen das Argument $alpha *erforderlich* ist, wenn der Funktionsname hsla() verwendet wird, und *verboten* ist, wenn der Funktionsname hsl() verwendet wird.

Dart Sass: ✓
LibSass: ✗
Ruby Sass: seit 3.7.0

LibSass und ältere Versionen von Ruby Sass unterstützen keine Alpha-Werte, die als Prozentsätze angegeben sind.

Gibt eine Farbe mit dem angegebenen Farbton, Sättigung und Helligkeit und dem angegebenen Alpha-Kanal zurück.

Der Farbton ist eine Zahl zwischen 0deg und 360deg (einschließlich) und kann einheitslos sein. Die Sättigung und Helligkeit sind typischerweise Zahlen zwischen 0% und 100% (einschließlich) und dürfen *nicht* einheitslos sein. Der Alpha-Kanal kann entweder als einheitslose Zahl zwischen 0 und 1 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden.

Ein Farbton außerhalb von 0deg und 360deg ist äquivalent zu $hue % 360deg. Eine Sättigung unter 0% wird auf 0% begrenzt. Eine Sättigung über 100% oder eine Helligkeit außerhalb von 0% und 100% sind beide erlaubt und repräsentieren Farben außerhalb des Standard RGB-Gamuts.

⚠️ Vorsicht!

Die speziellen Parsing-Regeln von Sass für schrägstrich-getrennte Werte machen es schwierig, Variablen für $lightness oder $alpha zu übergeben, wenn die Signatur hsl($hue $saturation $lightness / $alpha) verwendet wird. Erwägen Sie stattdessen die Verwendung von hsl($hue, $saturation, $lightness, $alpha).

  SCSS

  Sass

       SpielplatzSCSS-Syntax@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)

       SpielplatzSass-Syntax@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)

Gibt $if-true zurück, wenn $condition wahrheitsgemäß ist, und $if-false andernfalls.

Diese Funktion ist besonders, da sie nicht einmal das Argument auswertet, das nicht zurückgegeben wird. Daher ist es sicher, sie aufzurufen, auch wenn das ungenutzte Argument einen Fehler auslösen würde.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

       SpielplatzSass-Syntax@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: seit 1.78.0
LibSass: ✗
Ruby Sass: ✗

Gibt eine Farbe mit dem angegebenen Farbton, Weißanteil und Schwarzanteil und dem angegebenen Alpha-Kanal zurück.

Der Farbton ist eine Zahl zwischen 0deg und 360deg (einschließlich) und kann einheitslos sein. Der Weißanteil und Schwarzanteil sind Zahlen typischerweise zwischen 0% und 100% (einschließlich) und dürfen *nicht* einheitslos sein. Der Alpha-Kanal kann entweder als einheitslose Zahl zwischen 0 und 1 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden.

Ein Farbton außerhalb von 0deg und 360deg ist äquivalent zu $hue % 360deg. Wenn $whiteness + $blackness > 100%, werden die beiden Werte skaliert, sodass sie sich zu 100% addieren. Wenn $whiteness, $blackness oder beide kleiner als 0% sind, repräsentiert dies eine Farbe außerhalb des Standard RGB-Gamuts.

⚠️ Vorsicht!

Die color.hwb()-Varianten sind veraltet. Neuer Sass-Code sollte stattdessen die globale Funktion hwb() verwenden.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@debug hwb(210deg 0% 60%); // #036
@debug hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)

       SpielplatzSass-Syntax@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)

Gibt $if-true zurück, wenn $condition wahrheitsgemäß ist, und $if-false andernfalls.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

       SpielplatzSass-Syntax@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: seit 1.78.0
LibSass: ✗
Ruby Sass: ✗

Gibt eine Farbe mit den angegebenen [Helligkeit, a, b] und Alpha-Kanälen zurück.

Die Helligkeit ist eine Zahl zwischen 0% und 100% (einschließlich) und kann einheitslos sein. Die a- und b-Kanäle können entweder als einheitslose Zahlen zwischen -125 und 125 (einschließlich) oder als Prozentsätze zwischen -100% und 100% (einschließlich) angegeben werden. Der Alpha-Kanal kann entweder als einheitslose Zahl zwischen 0 und 1 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden.

Eine Helligkeit außerhalb des Bereichs von 0% und 100% wird auf diesen Bereich begrenzt. Wenn die a- oder b-Kanäle außerhalb des Bereichs von -125 bis 125 liegen, repräsentiert dies eine Farbe außerhalb des Standard CIELAB-Gamuts.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@debug lab(50% -20 30); // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5); // lab(80% 0 25 / 0.5);

       SpielplatzSass-Syntax@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: seit 1.78.0
LibSass: ✗
Ruby Sass: ✗

Gibt eine Farbe mit den angegebenen [Helligkeit, Chroma und Farbton] und dem angegebenen Alpha-Kanal zurück.

Die Helligkeit ist eine Zahl zwischen 0% und 100% (einschließlich) und kann einheitslos sein. Der Chroma-Kanal kann entweder als einheitslose Zahl zwischen 0 und 150 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden. Der Farbton ist eine Zahl zwischen 0deg und 360deg (einschließlich) und kann einheitslos sein. Der Alpha-Kanal kann entweder als einheitslose Zahl zwischen 0 und 1 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden.

Eine Helligkeit außerhalb des Bereichs von 0% und 100% wird auf diesen Bereich begrenzt. Ein Chroma-Wert unter 0 wird auf 0 begrenzt, und ein Chroma-Wert über 150 repräsentiert eine Farbe außerhalb des Standard CIELAB-Gamuts. Ein Farbton außerhalb von 0deg und 360deg ist äquivalent zu $hue % 360deg.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@debug lch(50% 10 270deg); // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5); // lch(80% 75 72deg / 0.5);

       SpielplatzSass-Syntax@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: seit 1.78.0
LibSass: ✗
Ruby Sass: ✗

Gibt eine Farbe mit der angegebenen wahrnehmungsuniformen Helligkeit, a, b und Alpha-Kanälen zurück.

Die Helligkeit ist eine Zahl zwischen 0% und 100% (einschließlich) und kann einheitslos sein. Die a- und b-Kanäle können entweder als einheitslose Zahlen zwischen -0.4 und 0.4 (einschließlich) oder als Prozentsätze zwischen -100% und 100% (einschließlich) angegeben werden. Der Alpha-Kanal kann entweder als einheitslose Zahl zwischen 0 und 1 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden.

Eine Helligkeit außerhalb des Bereichs von 0% und 100% wird auf diesen Bereich begrenzt. Wenn die a- oder b-Kanäle außerhalb des Bereichs von -0.4 bis 0.4 liegen, repräsentiert dies eine Farbe außerhalb des Standard Oklab-Gamuts.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@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)

       SpielplatzSass-Syntax@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: seit 1.78.0
LibSass: ✗
Ruby Sass: ✗

Gibt eine Farbe mit den angegebenen [wahrnehmungsuniformen Helligkeit, Chroma und Farbton] und dem angegebenen Alpha-Kanal zurück.

Die Helligkeit ist eine Zahl zwischen 0% und 100% (einschließlich) und kann einheitslos sein. Der Chroma-Kanal kann entweder als einheitslose Zahl zwischen 0 und 0.4 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden. Der Farbton ist eine Zahl zwischen 0deg und 360deg (einschließlich) und kann einheitslos sein. Der Alpha-Kanal kann entweder als einheitslose Zahl zwischen 0 und 1 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden.

Eine Helligkeit außerhalb des Bereichs von 0% und 100% wird auf diesen Bereich begrenzt. Ein Chroma-Wert unter 0 wird auf 0 begrenzt, und ein Chroma-Wert über 0.4 repräsentiert eine Farbe außerhalb des Standard Oklab-Gamuts. Ein Farbton außerhalb von 0deg und 360deg ist äquivalent zu $hue % 360deg.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@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);

       SpielplatzSass-Syntax@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: seit 1.15.0
LibSass: ✗
Ruby Sass: ✗

LibSass und Ruby Sass unterstützen nur die folgenden Signaturen

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

Beachten Sie, dass für diese Implementierungen das Argument $alpha *erforderlich* ist, wenn der Funktionsname rgba() verwendet wird, und *verboten* ist, wenn der Funktionsname rgb() verwendet wird.

Dart Sass: ✓
LibSass: ✗
Ruby Sass: seit 3.7.0

LibSass und ältere Versionen von Ruby Sass unterstützen keine Alpha-Werte, die als Prozentsätze angegeben sind.

Wenn $red, $green, $blue und optional $alpha übergeben werden, wird eine Farbe mit den angegebenen Rot-, Grün-, Blau- und Alpha-Kanälen zurückgegeben.

Jeder Kanal kann entweder als einheitslose Zahl zwischen 0 und 255 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden. Der Alpha-Kanal kann entweder als einheitslose Zahl zwischen 0 und 1 (einschließlich) oder als Prozentsatz zwischen 0% und 100% (einschließlich) angegeben werden.

Wenn ein Farbkanal außerhalb des Bereichs von 0 bis 255 liegt, repräsentiert dies eine Farbe außerhalb des Standard RGB-Gamuts.

⚠️ Vorsicht!

Die speziellen Parsing-Regeln von Sass für schrägstrich-getrennte Werte machen es schwierig, Variablen für $blue oder $alpha zu übergeben, wenn die Signatur rgb($red $green $blue / $alpha) verwendet wird. Erwägen Sie stattdessen die Verwendung von rgb($red, $green, $blue, $alpha).

  SCSS

  Sass

       SpielplatzSCSS-Syntax@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)

       SpielplatzSass-Syntax@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)

Wenn $color und $alpha übergeben werden, gibt dies $color mit dem angegebenen $alpha-Kanal anstelle seines ursprünglichen Alpha-Kanals zurück.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366

       SpielplatzSass-Syntax@debug rgb(#f2ece4, 50%)  // rgba(242, 236, 228, 0.5)
@debug rgba(rgba(0, 51, 102, 0.5), 1)  // #003366