Variablen

Eine Variablendeklaration sieht einer Eigenschaftsdeklaration sehr ähnlich: Sie wird als <variable>: <expression> geschrieben. Im Gegensatz zu einer Eigenschaft, die nur in einer Stilregel oder At-Regel deklariert werden kann, können Variablen überall deklariert werden, wo Sie möchten. Um eine Variable zu verwenden, fügen Sie sie einfach in einen Wert ein.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

Spielplatz

Sass-Syntax

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

CSS-Ausgabe

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

⚠️ Vorsicht!

CSS hat eigene Variablen, die sich völlig von Sass-Variablen unterscheiden. Kennen Sie die Unterschiede!

• Sass-Variablen werden alle von Sass kompiliert. CSS-Variablen werden in der CSS-Ausgabe enthalten.

• CSS-Variablen können unterschiedliche Werte für verschiedene Elemente haben, aber Sass-Variablen haben immer nur einen Wert zur Zeit.

• Sass-Variablen sind imperativ, was bedeutet, dass, wenn Sie eine Variable verwenden und dann ihren Wert ändern, die frühere Verwendung gleich bleibt. CSS-Variablen sind deklarativ, was bedeutet, dass, wenn Sie den Wert ändern, dies sowohl frühere als auch spätere Verwendungen betrifft.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

Spielplatz

Sass-Syntax

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

CSS-Ausgabe

.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

StandardwerteStandardwerte Permalink

Normalerweise, wenn Sie einer Variable einen Wert zuweisen und diese Variable bereits einen Wert hatte, wird ihr alter Wert überschrieben. Wenn Sie jedoch eine Sass-Bibliothek schreiben, möchten Sie vielleicht, dass Ihre Benutzer die Variablen Ihrer Bibliothek konfigurieren können, bevor Sie sie zur Generierung von CSS verwenden.

Um dies zu ermöglichen, bietet Sass das Flag !default. Dies weist einer Variable einen Wert zu, nur wenn diese Variable nicht definiert ist oder ihr Wert null ist. Andernfalls wird der vorhandene Wert verwendet.

Module konfigurierenModule konfigurieren Permalink

Kompatibilität

Dart Sass

seit 1.23.0

LibSass

✗

Ruby Sass

✗

➤

Mit !default definierte Variablen können beim Laden eines Moduls mit der @use-Regel konfiguriert werden. Sass-Bibliotheken verwenden häufig !default-Variablen, damit ihre Benutzer die CSS der Bibliothek konfigurieren können.

Um ein Modul mit Konfiguration zu laden, schreiben Sie @use <url> with (<variable>: <value>, <variable>: <value>). Die konfigurierten Werte überschreiben die Standardwerte der Variablen. Nur Variablen, die auf der obersten Ebene des Stylesheets mit einem !default-Flag geschrieben wurden, können konfiguriert werden.

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
  border-radius: $border-radius
  box-shadow: $box-shadow

// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

Eingebaute VariablenEingebaute Variablen Permalink

Variablen, die von einem eingebauten Modul definiert werden, können nicht modifiziert werden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use "sass:math" as math;

// This assignment will fail.
math.$pi: 0;

Spielplatz

Sass-Syntax

@use "sass:math" as math

// This assignment will fail.
math.$pi: 0

GültigkeitsbereichGültigkeitsbereich Permalink

Variablen, die auf der obersten Ebene eines Stylesheets deklariert werden, sind global. Das bedeutet, dass sie überall in ihrem Modul nach ihrer Deklaration zugänglich sind. Aber das gilt nicht für alle Variablen. Diejenigen, die in Blöcken (geschweifte Klammern in SCSS oder eingerückter Code in Sass) deklariert sind, sind normalerweise lokal und nur innerhalb des Blocks zugänglich, in dem sie deklariert wurden.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

$global-variable: global value;

.content {
  $local-variable: local value;
  global: $global-variable;
  local: $local-variable;
}

.sidebar {
  global: $global-variable;

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable;
}

Spielplatz

Sass-Syntax

$global-variable: global value

.content
  $local-variable: local value
  global: $global-variable
  local: $local-variable


.sidebar
  global: $global-variable

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable

CSS-Ausgabe

.content {
  global: global value;
  local: local value;
}

.sidebar {
  global: global value;
}

ÜberschattungÜberschattung Permalink

Lokale Variablen können sogar mit demselben Namen wie eine globale Variable deklariert werden. Wenn dies geschieht, gibt es tatsächlich zwei verschiedene Variablen mit demselben Namen: eine lokale und eine globale. Dies hilft sicherzustellen, dass ein Autor, der eine lokale Variable schreibt, nicht versehentlich den Wert einer globalen Variable ändert, die ihm nicht einmal bewusst ist.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

$variable: global value;

.content {
  $variable: local value;
  value: $variable;
}

.sidebar {
  value: $variable;
}

Spielplatz

Sass-Syntax

$variable: global value

.content
  $variable: local value
  value: $variable


.sidebar
  value: $variable

CSS-Ausgabe

.content {
  value: local value;
}

.sidebar {
  value: global value;
}

Wenn Sie den Wert einer globalen Variable aus einem lokalen Gültigkeitsbereich (z. B. in einem Mixin) festlegen müssen, können Sie das Flag !global verwenden. Eine als !global gekennzeichnete Variablendeklaration weist immer dem globalen Gültigkeitsbereich zu.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

$variable: first global value;

.content {
  $variable: second global value !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}

Spielplatz

Sass-Syntax

$variable: first global value

.content
  $variable: second global value !global
  value: $variable


.sidebar
  value: $variable

CSS-Ausgabe

.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

Ablaufsteuerung GültigkeitsbereichAblaufsteuerung Gültigkeitsbereich Permalink

In Ablaufsteuerungsregeln deklarierte Variablen haben spezielle Geltungsbereichsregeln: Sie überschatten keine Variablen auf derselben Ebene wie die Ablaufsteuerungsregel. Stattdessen weisen sie diesen Variablen einfach Werte zu. Dies erleichtert das bedingte Zuweisen eines Wertes zu einer Variable oder das Aufbauen eines Wertes als Teil einer Schleife erheblich.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

Spielplatz

Sass-Syntax

$dark-theme: true !default
$primary-color: #f8bbd0 !default
$accent-color: #6a1b9a !default

@if $dark-theme
  $primary-color: darken($primary-color, 60%)
  $accent-color: lighten($accent-color, 60%)


.button
  background-color: $primary-color
  border: 1px solid $accent-color
  border-radius: 3px

CSS-Ausgabe

.button {
  background-color: rgb(116.96, 12.04, 48.16);
  border: 1px solid rgb(245.4696132597, 235.4309392265, 251.5690607735);
  border-radius: 3px;
}

Erweiterte VariablenfunktionenErweiterte Variablenfunktionen Permalink

Die Sass-Kernbibliothek bietet einige erweiterte Funktionen für die Arbeit mit Variablen. Die Funktion meta.variable-exists() gibt zurück, ob eine Variable mit dem angegebenen Namen im aktuellen Gültigkeitsbereich existiert, und die Funktion meta.global-variable-exists() tut dasselbe, aber nur für den globalen Geltungsbereich.

⚠️ Vorsicht!

Benutzer möchten gelegentlich Interpolation verwenden, um einen Variablennamen basierend auf einer anderen Variable zu definieren. Sass erlaubt dies nicht, da es erheblich erschwert, auf einen Blick zu erkennen, welche Variablen wo definiert sind. Was Sie jedoch tun können, ist die Definition einer Map von Namen zu Werten, auf die Sie dann mithilfe von Variablen zugreifen können.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

@use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

Spielplatz

Sass-Syntax

@use "sass:map"

$theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107)

.alert
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning")

CSS-Ausgabe

.alert {
  background-color: #ffc107;
}