SASS- und BrowserSync-Integration

SASS (Syntactically Awesome Stylesheets) macht CSS komfortabler. Du kannst Variablen verwenden, Code verschachteln und wiederholte Stile sparen. BrowserSync aktualisiert deinen Browser automatisch, wenn du Dateien speicherst – so sparst du das manuelle Neuladen.

SASS und BrowserSync Schritt für Schritt

Node.js und npm installieren: Lade die aktuelle LTS-Version von nodejs.org herunter und installiere sie. npm ist dabei bereits enthalten und wird automatisch mitinstalliert. Prüfe danach im Terminal, ob alles funktioniert.
```
node --version
npm --version
```
Terminal

Alternative mit nvm: Wenn du Node.js häufiger wechselst, ist nvm praktisch. Damit kannst du mehrere Node-Versionen parallel verwalten und pro Projekt die passende Version aktivieren.
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install --lts
nvm use --lts
```
Terminal

Der Vorteil: Du musst Node.js nicht systemweit ersetzen, sondern kannst für jedes Projekt die passende Version nutzen. Das macht deinen Rechner flexibler und verhindert Versionskonflikte.
SASS und BrowserSync installieren: Installiere beide Werkzeuge lokal in deinem Projektordner. So bleibt dein System sauber und alle Abhängigkeiten sind im Projekt gespeichert.
```
npm install sass browser-sync
```
Terminal
Bestehendes CSS direkt nach SASS umschreiben: Wenn du bereits eine style.css hast, überträgst du sie Schritt für Schritt direkt in eine .sass-Datei. Es gibt auch .scss als Alternative mit CSS-ähnlicher Syntax, hier bleiben wir aber bewusst beim direkten Weg zu SASS.
- Backup anlegen, bevor du umbaust: Dupliziere deinen Projektordner einmal komplett, damit du bei Fehlern jederzeit auf einen funktionierenden Stand zurückgehen kannst.
  Wichtig: Navigiere zuerst in den Ordner, in dem dein Projektordner liegt, und führe dann den Kopierbefehl aus. Falls du im Terminal noch unsicher bist, lies vorher die Einführung ins Terminal.
```
cd /pfad/zum/uebergeordneten-ordner
cp -R projektordner projektordner-backup
```
  Terminal
  
  Öffne danach den Finder und prüfe, ob der neue Ordner projektordner-backup im selben Verzeichnis liegt.
- Datei anlegen und schrittweise migrieren: Erstelle style.sass und übertrage den Inhalt aus style.css abschnittsweise (zuerst Basis-Stile, dann Komponenten). So bleiben Fehler leichter nachvollziehbar.
- Wiederholte Werte systematisch ersetzen: Sammle Farben, Abstände und Schriften und ersetze sie konsistent über Variablen statt über Einzelwerte im Code.
  - Wir fokussieren uns auf CSS-Variablen, z. B. in :root (z. B. --color-primary, --spacing) für Werte, die im Browser verfügbar bleiben sollen, etwa für Light-/Darkmode.
  - Nur zur Info: Alternativ können wir nun auf SASS-Variablen (z. B. $color-primary) für feste Werte zurückgreifen, die bereits beim Kompilieren aufgelöst werden dürfen. Weitere Infos: sass-lang.com/documentation/variables.
- Syntax sauber umstellen: Entferne geschweifte Klammern und Semikolons und nutze Einrückungen, um die Struktur eindeutig zu machen.
- Verschachtelung gezielt einsetzen: Fasse nur logisch zusammengehörige Selektoren zusammen, damit die SASS-Struktur dem HTML-Aufbau folgt und lesbar bleibt.
- Datei früh gliedern: Teile größere Styles in Partials wie _layout.sass, _buttons.sass und _typography.sass auf.
Syntaxvergleich
```
:root {
  --color-primary: #2d5016;
}

.card {
  background: var(--color-primary);
  padding: 1rem;
}

.card h2 {
  color: white;
}
```
CSS
```
:root {
  --color-primary: #2d5016;
}

.card {
  background: var(--color-primary);
  padding: 1rem;

  h2 {
    color: white;
  }
}
```
SCSS
```
:root
  --color-primary: #2d5016

.card
  background: var(--color-primary)
  padding: 1rem

  h2
    color: white
```
SASS
SASS-Datei anlegen: Schreibe deine Stile in einer .sass-Datei. In der SASS-Syntax arbeitest du ohne geschweifte Klammern und ohne Semikolons. Nutze Variablen und Verschachtelung, um dein CSS übersichtlicher und wiederverwendbar zu machen.
```
// Variablen
$color-primary: #2d5016
$spacing: 1rem

// Verschachtelung
header
  background-color: $color-primary
  padding: $spacing

  h1
    margin: 0
    color: white

  nav
    margin-top: $spacing
```
SASS

Mehrere SASS-Dateien kombinieren: Teile dein Styling nach Aufgaben auf und lade alles in einer zentralen Datei. Ein typischer Aufbau sieht so aus: style.sass (Einstieg), sass/_variablen.sass (Designwerte), sass/_buttons.sass (Komponenten).

// style.sass (zentrale Einstiegsdatei)
@use "sass/variablen"
@use "sass/buttons"

main
  padding: 1rem

style.sass

// sass/_variablen.sass
$color-primary: #2d5016
$color-text-on-primary: white
$button-padding: .6rem 1rem

sass/_variablen.sass

// sass/_buttons.sass
@use "variablen" as v

.button
  background-color: v.$color-primary
  color: v.$color-text-on-primary
  padding: v.$button-padding
  border-radius: .4rem

sass/_buttons.sass

SASS kompilieren: Übersetze deine .sass-Datei in normales CSS. Mit npx kannst du das Tool direkt aus dem Projekt ausführen. Der --watch-Modus sorgt dafür, dass Änderungen automatisch übernommen werden.
```
npx sass --watch style.sass:style.css
```
Terminal

Watch-Prozess beenden: Solange --watch läuft, bleibt das Terminal aktiv. Beende den Prozess mit Ctrl + C im jeweiligen Terminalfenster.
BrowserSync starten: Starte BrowserSync in einem zweiten Terminal. Damit wird deine Seite bei jeder Änderung an HTML oder CSS automatisch neu geladen – das spart Zeit beim Entwickeln.
```
npx browser-sync start --server --files "*.html, *.css"
```
Terminal

BrowserSync beenden: Stoppe den laufenden Prozess mit Ctrl + C im BrowserSync-Terminal.
CSS für den Live-Betrieb optimieren: Wenn dein Design fertig ist, kannst du das CSS mit SASS minifizieren. So wird die Datei kleiner und lädt schneller im Browser. Diesen Befehl führst du einmalig aus, bevor du deine Projektdateien auf einen Server lädst.
```
npx sass style.sass:style.css --style=compressed
```
Terminal

SASS und BrowserSync Schritt für Schritt

Syntaxvergleich