SASS Tutorial Guide + SCSS erklärt | Anfänger Tutorial 2026

Sass Beginenr Coding Lab Steffen Lippke Tutorials und Guides

Dieses Tutorial erklärt Dir, was diese SASS und SCSS Dein Projekt auf das nächste Stylelevel heben!

Möchtest Du lernen, wie Du mit CSS Zeit sparen und effizienter arbeiten kannst?

Starten wir!

Inhalt verstecken

1 3 Simple Erklärungen für CSS, Sass, SCSS
2 5 Vorteile von Sass – Wie soll ich Sass nutzen?
3 3 Schritte zum Sass-Erfolg. Das Sass Tutorial.
4 Neue Funktionen

3 Simple Erklärungen für CSS, Sass, SCSS

Was sind CSS (Cascading Stylesheets)?

Wenn HTML das Grundgerüst Deiner Webseite ist, verleiht CSS den Objekten auf Deiner Webseite die Farbe und Form.

Die Cascading Stylesheets sind Gestaltungsbögen, mit dem Du Deine Objekte auf der HTML veränderst. Du definierst z. B. …

Größe
Boxfarbe
Textfarbe
Position
…

… einer Box, eines Eingabefelds, eines Texts.

Die CSS ermöglicht Animation und Effekte, wenn der Nutzer interagiert: Z.B. Du ziehst die Maus über einen Button und dieser verfärbt sich (HOVER-Animation).


.todo {
    position: relative;
}

.tickboxcage:hover:after {
    content: ' ';
    position: absolute;
    top: 22px;
    left: 30px;
    width: 87%;
    height: 2px;
    background: var(--tint);
    animation: strike .55s ease-in-out forwards;
}

.loader .icon-inner {
    animation: rotation 2s infinite linear;
}

Was ist Sass (Syntactically Awesome Stylesheets)?

Sass ist für Dich der Maler für Dein Web-Projekt. Du bist Chef aller Maler und sagst kurz und knapp, was Du machen willst.

Der Maler führt wiederkehrende Aufgaben aus, stellt für Dich die Farben zusammen und mischt diese nach Deinen Vorgaben.

Sass ist ein Framework, welches die Funktionen für CSS erweitert. In Sass bzw. SCSS programmierst Du und er Sass-Compiler übersetzt die SCSS-Dateien zu normales CSS-Dateien.

SASS vs. SCSS

Beide sind Sass-Syntaxen, die von demselben CSS-Präprozessor Sass verwendet werden. Der Unterschied liegt hauptsächlich im Syntax-Stil, aber die Funktionalität ist gleich.

1. SASS (Syntactically Awesome Stylesheets)

Einrückung: SASS verwendet Einrückungen (wie in Python) anstelle von geschweiften Klammern {} und Semikolons ;, um Blöcke und Anweisungen zu definieren.
Keine geschweiften Klammern: Anstatt {} für Blockdefinitionen zu verwenden, nutzt SASS Einrückungen und Zeilenumbrüche.
Keine Semikolons: Semikolons am Ende von Anweisungen sind nicht erforderlich (sie sind optional).
Beispiel:

$primary-color: #333
body
  color: $primary-color
  font-family: Arial, sans-serif

2. SCSS (Sassy CSS)

CSS-kompatible Syntax: SCSS ist eine Erweiterung von CSS. Es verwendet die gleiche Syntax wie normales CSS, mit geschweiften Klammern {} und Semikolons ;.
Semikolons erforderlich: Jede Anweisung endet mit einem Semikolon.
Beispiel:

$primary-color: #333;
body {
  color: $primary-color;
  font-family: Arial, sans-serif;
}

Wichtige Unterschiede:

Syntax: SASS verwendet Einrückungen, SCSS verwendet die Standard-CSS-Syntax.
Lesbarkeit: SCSS wird oft als lesbarer angesehen, besonders für Entwickler, die mit normalem CSS vertraut sind.
Kompatibilität: SCSS ist vollständig mit CSS kompatibel. Das bedeutet, dass du .css-Dateien einfach in .scss umbenennen kannst, und sie funktionieren wie gewohnt.

Welche Syntax solltest Du wählen?

Wenn Du eine minimalistische, saubere Syntax bevorzugst und keine Bedenken hast, auf die gewohnte CSS-Syntax zu verzichten, könnte SASS die bessere Wahl sein.
Wenn Du die Standard-CSS-Syntax magst und ein schnelleres Umsteigen von reinem CSS auf Sass bevorzugst, dann ist SCSS oft die bessere Wahl.

SCSS wird in der Praxis häufiger verwendet, weil es näher an der bekannten CSS-Syntax ist und einen leichteren Einstieg bietet.

5 Vorteile von Sass – Wie soll ich Sass nutzen?

Sass soll Dich beim Schreiben von CSS-Code unterstützen. Ionic verwendet Sass, um Tipparbeit zu sparen. Wenn Du die hybride App-Entwicklung mit Ionic testen möchtest, habe ich für Dich ein Beginner Tutorial geschrieben.

Die CSS-Dateien bei vielen Webprojekten können schnell sehr groß werden (1000 Zielen und mehr). Wegen Ihrer Größe sind diese sehr unübersichtlich und bedeuten viel Tipparbeit.

Da CSS lediglich sagt, wie die Objekte auszusehen haben. CSS ist sehr statisch, ohne Iteratoren oder Variablen.

Wenn Du aber eine Farbpalette Dir ausgesucht hast, nutzt Du immer die gleichen 6 Farben. Kommt der Kunde vorbei und sagt, dass dieser alles in Pink-Blau-Kariert mit Goldrand und Animationen haben will, dann hast Du viel zu ändern.

Bessere Übersicht
Automatisierung von CSS
Feature: Variablen
Weniger Code
Weniger HTTP-Request wegen Kombination von CSS

3 Schritte zum Sass-Erfolg. Das Sass Tutorial.

#1 Installation

Für Sass muss Node.js auf Deinen PC installiert sein. Node.js ist ein Paketmanager für JavaScript Code. Diese kannst Du in allen Webprojekten einsetzen, um Schreibarbeit und Zeit zu sparen.

Installiere Dir Node.js
Download Node.js
Dann tippst Du folgendes Kommando in Deinem Projekt ein.
npm install -g node-sass

#2 Einbinden

Erstelle ein Web-Projekt mit .html Datei und arbeite wie gewohnt. Der einzige Unterschied ist der Import eine SCSS-Datei anstatt einer normalen CSS-Datei.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sass Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <ul>
            <li>Test</li>
            <li>SCSS</li>
            <li>Sass</li>
            <li>CSS</li>
        </ul>
    </div>

    <div class="tollerButton absenden">Absenden</div>
    <div class="tollerButton ok">OK</div>

</body>
</html>

Erstelle eine CSS Datei mit Deinen Stylesheets.

#3 Automatisieren

Gebe in eine Bash / Terminal den folgenden Befehl ein.

sass –watch inputSass.scss output.css

// Vaiablen 
$font-stack: Helvetica,
sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

// Nesting / Schtelung
div {
    li {
        color: brown;
    }
}

// SCSS-Datei "mehr.scss" wird importiert
@import "mehr"

Sobald Du etwas in der SCSS-Datei änderst, führt sich das Sass-Skript automatisch aus und die erhältst eine normale CSS-Datei. So kannst Du live beim Arbeiten an der SCSS-Datei die Ergebnisse im Browser die ansehen.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

div li {
  color: brown;
}

* {
  font-size: 40px;
}

li:first-child {
  font-weight: bold;
  color: red;
}

.tolleButton, .ok, .absenden {
  font-size: 14px;
  color: white;
  text-align: center;
  padding: 10px;
  margin: auto;
}

.absenden {
  background-color: red;
}

.ok {
  background-color: green;
}

/*# sourceMappingURL=style.css.map */

Neue Funktionen

Splitten von CSS mit @import

@import kann andere SCSS Dateien importieren. Wenn Du eine große CSS Datei hast, kann dieser Weg Dir wieder Übersicht verschaffen. Teile Deine CSS in verschiedene Abschnitte. Erstelle SCSS Dateien für

Global: für z.B. Schriftarten und Farbthemen, die im ganzen Projekt gelten sollen
Aufgeteilt nach …
- Komponenten: Buttons, Tabellen, Karten
- Funktionen: Formulare, Blog-Ansicht, Sozial
- Webseiten: Home, Kontakt

Das Aufteilen erleichtert das Navigieren und Code wiederfinden.

Weniger Tippen mit @extend

@extend übernimmt die CSS-Statements aus anderen Selektoren, sodass Du diese nicht zweifach schreiben musst.

@extend <name> nimmt die bestehenden CSS Kommandos und überträgt diese in den Selektor.

*  {
    font-size: 40px;
}

@mixin danger-text {
    font-weight: bold;
    color: red;
}

li:first-child {
    @include danger-text;
}

.tolleButton {
    font-size: 7px * 2;

    color: white;
    text-align: center;
    padding: 10px;
    margin: auto;
}

.absenden {
    @extend .tolleButton;
    background-color: red;
}

.ok {
    @extend .tolleButton;
    background-color: green;
}

CSS Variablen

Variablen speichern Werte von Farben, Längen, Abstände, Einstellung in Form eines Strings. Wenn Du einen Wert immer wieder verwendest, solltest Du eine Variable nutzen, um Code zu sparen.

CSS-Variablen sind sehr praktisch, um wiederverwendbare Werte zu definieren und den Code flexibler zu gestalten. Hier sind einige Beispiele für sinnvolle CSS-Variablen, die in realen Projekten hilfreich sein können:

1. Farbvariablen

Farbvariablen sind wahrscheinlich die am häufigsten verwendeten CSS-Variablen. Sie ermöglichen es, die Farben der Website einfach zu ändern, ohne die gesamten CSS-Dateien anpassen zu müssen.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --background-color: #f4f4f4;
  --border-color: #ccc;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

button {
  background-color: var(--primary-color);
  border: 1px solid var(--border-color);
}

button:hover {
  background-color: var(--secondary-color);
}

2. Typografie-Variablen

Typografie-Variablen helfen, Schriftarten und Schriftgrößen konsistent zu gestalten.

:root {
  --font-family-primary: 'Arial', sans-serif;
  --font-family-secondary: 'Georgia', serif;
  --font-size-base: 16px;
  --font-size-heading: 2rem;
  --line-height-base: 1.5;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1 {
  font-size: var(--font-size-heading);
  font-family: var(--font-family-secondary);
}

3. Spacing-Variablen

Abstand-Variablen für Konsistenz bei Margin und Padding.

:root {
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
}

.container {
  padding: var(--space-md);
}

section {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

4. Breakpoints für Responsivität

Mit Variablen für Breakpoints kannst Du die Medienabfragen an einem Ort definieren und bei Bedarf anpassen.

:root {
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

@media (max-width: var(--breakpoint-sm)) {
  .container {
    padding: var(--space-sm);
  }
}

@media (min-width: var(--breakpoint-md)) {
  .container {
    padding: var(--space-md);
  }
}

5. Z-Index-Variablen

Z-Index-Variablen helfen dabei, die Layer-Reihenfolge klar und wartbar zu halten.

:root {
  --z-index-modal: 1000;
  --z-index-dropdown: 500;
  --z-index-header: 10;
}

.modal {
  z-index: var(--z-index-modal);
}

.dropdown {
  z-index: var(--z-index-dropdown);
}

6. Größen- und Layout-Variablen

Größen von Container, Elementen und Layouts können auch als Variablen definiert werden.

:root {
  --container-width: 1200px;
  --sidebar-width: 300px;
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

.sidebar {
  width: var(--sidebar-width);
}

7. Animierte Übergänge und Timing

CSS-Variablen für Übergänge und Animations-Timings können den Code leichter anpassbar machen.

:root {
  --transition-duration: 0.3s;
  --transition-timing: ease-in-out;
}

button {
  transition: background-color var(--transition-duration) var(--transition-timing);
}

button:hover {
  background-color: var(--secondary-color);
}

Vorteile von CSS-Variablen:

Wiederverwendbarkeit: Einmal definierte Werte können überall im Stylesheet verwendet werden.
Wartbarkeit: Änderungen an einer einzigen Stelle wirken sich auf den gesamten Code aus.
Flexibilität: Mit var() können dynamischere Styles für Themes oder Änderungen je nach Kontext erstellt werden.

Die Verwendung von gut benannten Variablen hilft dabei, den Code sauber, konsistent und leichter wartbar zu halten.

Dieser Beitrag ist zitierfähig. Adaptiere das Beispiel nach dem Harvard Stil: Lippke, Steffen (2026): ‚Programmieren lernen – Tutorial für Einsteiger‘, Security and Coding Explosive Tutorials [online], 01. Januar 2026. Verfügbar unter: https://lippke.li/programmieren-lernen/, ISSN: 3054-3436

Author:

Steffen Lippke

Categories:

Coding, Schneller mit Frameworks

Updated:

12.10.2025

Tags:

Sassy CSS Syntactically Awesome Style Sheets