SASS-Spickzettel
Eine durchsuchbare, druckbare Sass-/SCSS-Referenz — Variablen, Verschachtelung, @use-Module, Mixins, Funktionen, Kontrollfluss und integrierte Module. Kostenlos.
Variablen
10$primary: #1d6f42;
Eine Variable deklarieren
$radius: 4px !default;
Nur setzen, wenn noch nicht definiert
$theme: dark !global;
Aus einem Block heraus dem globalen Scope zuweisen
.box { $w: 10px; width: $w; }
Lokale Variable, auf den Block begrenzt
$font-stack: 'Inter', sans-serif;
String-/Listenwert
$gap: 8px * 2;
Variablen können berechnete Werte halten
color: $primary;
Eine Variable als Eigenschaftswert verwenden
$sizes: 4px, 8px, 16px;
Eine kommagetrennte Listenvariable
$config: ('gap': 8px);
Eine Map-Variable (Schlüssel/Wert-Paare)
$on: true;
Boolesche Variable für die Ablaufsteuerung
Verschachtelung
9.card { .title { color: red; } }
Einen Selektor in seinem Elternteil verschachteln
.btn { &:hover { opacity: .8; } }
& verweist auf den Eltern-Selektor
.btn { &.is-active {} }
Zusammengesetzter Eltern-Selektor mit &
.list { & + & { margin-top: 8px; } }
Nachbar-Geschwister-Regel mit &
.menu { .dark & { color: #fff; } }
& ans Ende setzen, um einen Kontext voranzustellen
.box { font: { size: 14px; weight: 700; } }
Verschachtelte Eigenschaften für einen Namensraum (font-*)
.grid { > .col {} }
Verschachtelter Kind-Kombinator
@media (min-width: 768px) { .col { width: 50%; } }
Media Queries ebenfalls in einer Regel verschachteln
.a { color: red; .b & { color: blue; } }
Kontext durch Verschieben von & umordnen
Partials & Module
10_base.scss
Partial-Datei (führender Unterstrich, nicht allein kompiliert)
@use 'base';
Ein Modul laden (Namensraum per Dateiname)
base.$primary;
Ein Mitglied über seinen Namensraum ansprechen
@use 'base' as b;
Ein Modul unter einem eigenen Namensraum laden
@use 'base' as *;
In den globalen Namensraum laden (kein Präfix)
@use 'theme' with ($primary: #000);
Die !default-Variablen eines Moduls beim Laden konfigurieren
@forward 'buttons';
Ein Modul von einem Einstiegspunkt re-exportieren
@forward 'buttons' as btn-*;
Mitglieder mit einem Präfix weiterleiten
@forward 'src/list' hide list-reset;
Weiterleiten, aber bestimmte Mitglieder verbergen
@forward 'config' with ($gap: 4px !default);
Weiterleiten und konfigurierbare Standards setzen
Mixins
10@mixin reset { margin: 0; padding: 0; }
Einen wiederverwendbaren Deklarationsblock definieren
@include reset;
Ein Mixin anwenden
@mixin pad($x) { padding: $x; }
Mixin mit einem Argument
@include pad(8px);
Beim Einbinden ein Argument übergeben
@mixin pad($x: 4px) { padding: $x; }
Argument mit einem Standardwert
@include pad($x: 12px);
Ein Argument per Schlüsselwort übergeben
@mixin shadow($a...) { box-shadow: $a; }
Beliebige (variable) Argumente
@mixin card { border: 1px solid; @content; }
Einen @content-Block annehmen
@include card { color: red; }
Einen Block an das @content des Mixins übergeben
@mixin on-dark { @content; }
Beliebige per @content übergebene Regeln umschließen
Funktionen
9@function double($n) { @return $n * 2; }
Eine Funktion definieren, die einen Wert zurückgibt
width: double(8px);
Eine eigene Funktion aufrufen
@function pad($x: 4px) { @return $x; }
Funktion mit Standardargument
@function sum($a, $b) { @return $a + $b; }
Mehrere Argumente
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Funktionen können Ablaufsteuerung enthalten
@use 'sass:math';
Ein integriertes Modul für Funktionen importieren
@function half($n) { @return math.div($n, 2); }
Modulfunktionen in eigenen Funktionen verwenden
@function list-len($l) { @return list.length($l); }
Funktionen können Built-ins umschließen
margin: sum(4px, 8px);
Den Rückgabewert als Eigenschaftswert verwenden
Operatoren & Mathematik
10@use 'sass:math';
Das Math-Modul für Division laden
width: math.div(100%, 3);
Division (math.div, nicht das veraltete /)
width: 100% - 20px;
Subtraktion
margin: 4px + 4px;
Addition
width: 2 * 8px;
Multiplikation
$r: 10 % 3;
Modulo (Rest)
@if $a == $b {}
Gleichheitsvergleich
@if $a >= 768px {}
Größer-gleich-Vergleich
@if $a and $b {}
Logisches Und
@if not $disabled {}
Logische Negation
Kontrollfluss
9@if $on { display: block; }
Bedingter Block
@else if $alt { display: flex; }
Zusätzliche Bedingung
@else { display: none; }
Fallback-Zweig
@each $c in red, green, blue {}
Über eine Liste iterieren
@each $name, $val in $map {}
Über die Schlüssel und Werte einer Map iterieren
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Regeln aus einer Map generieren
@for $i from 1 through 3 {}
Schleife inklusive des Endwerts
@for $i from 0 to 3 {}
Schleife exklusive des Endwerts
@while $i > 0 { $i: $i - 1; }
Schleife, solange Bedingung gilt
Integrierte Module
14@use 'sass:math'; math.floor(4.7)
Auf die nächste Ganzzahl abrunden
math.ceil(4.1)
Auf die nächste Ganzzahl aufrunden
math.round(4.5)
Auf die nächste Ganzzahl runden
math.percentage(math.div(1, 4))
Ein einheitenloses Verhältnis in einen Prozentwert umwandeln
@use 'sass:string'; string.to-upper-case('hi')
Einen String in Großbuchstaben umwandeln
string.quote(hello)
Einen Wert in Anführungszeichen setzen
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Einen Farbkanal um einen Betrag anpassen
color.scale($c, $lightness: 20%)
Einen Farbkanal fließend skalieren
color.mix($a, $b, 50%)
Zwei Farben mischen
@use 'sass:list'; list.length($l)
Anzahl der Elemente in einer Liste
list.nth($l, 1)
Das n-te Element holen (1-basiert)
@use 'sass:map'; map.get($m, 'gap')
Einen Wert per Schlüssel aus einer Map lesen
map.merge($a, $b)
Zwei Maps zusammenführen
map.keys($m)
Eine Liste der Schlüssel einer Map holen
Platzhalter & Vererbung
9%card { border: 1px solid; }
Platzhalter-Selektor (allein nicht ausgegeben)
.box { @extend %card; }
Die Stile eines Platzhalters erben
.alert { color: red; }
Ein normaler Selektor zum Erweitern
.error { @extend .alert; }
Einen echten Selektor erweitern
.note { @extend .alert !optional; }
!optional: keinen Fehler, wenn das Ziel fehlt
%btn-base { padding: 8px; }
Eine Basis über viele Buttons hinweg teilen
.btn-primary { @extend %btn-base; }
Mehrere Selektoren teilen sich eine Regel via @extend
.btn-ghost { @extend %btn-base; }
Jede Erweiterung wird in der Ausgabe gruppiert
@include card;
Mixins statt @extend für parametrisierte Wiederverwendung bevorzugen
Interpolation & Sonstiges
12.icon-#{$name} { content: ''; }
Eine Variable in einen Selektor interpolieren
width: calc(100% - #{$gap});
Einen Sass-Wert in calc() interpolieren
content: '#{$count} items';
In einem String interpolieren
--bs-#{$key}: #{$val};
CSS-Custom-Properties dynamisch aufbauen
$map: ('sm': 576px, 'md': 768px);
Eine Map aus Schlüssel/Wert-Paaren definieren
map.get($map, 'md')
Einen Map-Wert lesen (via sass:map)
@debug $value;
Einen Wert beim Kompilieren in die Konsole ausgeben
@warn 'deprecated';
Eine Warnung zur Kompilierzeit ausgeben
@error 'invalid input';
Die Kompilierung mit einem Fehler abbrechen
// inline comment
Stiller Kommentar (aus der Ausgabe entfernt)
/* block comment */
CSS-Kommentar (in komprimierter Ausgabe behalten bei /*! )
@import 'base';
Legacy-Import — veraltet, @use / @forward bevorzugen
Kein Eintrag passt zu „:q“.
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.