3 Sass Grundlagen

3.1 Einführung in Sass

Sass erweitert CSS um programmierähnliche Funktionen, die das Schreiben und Verwalten von Stylesheets erheblich vereinfachen. Sie schreiben Sass-Code, der dann zu normalem CSS kompiliert wird, das jeder Browser versteht.

3.1.1 Die zwei Sass-Syntaxformen im Vergleich

SCSS-Syntax (.scss) - Empfohlen für Anfänger und bestehende Projekte:

$primary-color: #3498db;
$margin: 16px;

.header {
  background-color: $primary-color;
  margin: $margin;
  
  h1 {
    color: white;
    font-size: 2rem;
  }
}

Sass-Syntax (.sass) - Kompakter, aber gewöhnungsbedürftig:

$primary-color: #3498db
$margin: 16px

.header
  background-color: $primary-color
  margin: $margin
  
  h1
    color: white
    font-size: 2rem

Beide Syntaxformen kompilieren zum identischen CSS-Output. Für Ihr Bootstrap-Flask-Projekt empfiehlt sich SCSS, da Bootstrap selbst in SCSS geschrieben ist.

3.1.2 Sass vs. normales CSS - Direkter Vergleich

Normales CSS (repetitiv und schwer wartbar):

.header {
  background-color: #3498db;
  margin: 16px;
}

.header h1 {
  color: white;
  font-size: 2rem;
}

.sidebar {
  background-color: #3498db;
  margin: 16px;
}

.footer {
  background-color: #3498db;
  margin: 16px;
}

Äquivalenter Sass-Code (DRY-Prinzip, wartbar):

$primary-color: #3498db;
$margin: 16px;

.header {
  background-color: $primary-color;
  margin: $margin;
  
  h1 {
    color: white;
    font-size: 2rem;
  }
}

.sidebar, .footer {
  background-color: $primary-color;
  margin: $margin;
}

3.2 Installation und Setup

3.2.1 Schritt 1: Sass installieren

Option A: Über npm (empfohlen für Webprojekte)

# Global installieren
npm install -g sass

# Oder lokal im Projekt (empfohlen)
npm install --save-dev sass

Option B: Standalone-Installation

Windows: Herunterladen von https://github.com/sass/dart-sass/releases
macOS: brew install sass/sass/sass
Linux: Download der Binary-Datei

3.2.2 Schritt 2: Installation testen

# Version prüfen
sass --version

# Sollte ausgeben: z.B. "1.69.5 compiled with dart2js 3.1.0"

3.2.3 Schritt 3: Erste Sass-Datei kompilieren

Erstellen Sie eine Testdatei test.scss:

$color: red;

.test {
  color: $color;
}

Kompilieren Sie diese:

sass test.scss test.css

Das Ergebnis in test.css:

.test {
  color: red;
}

3.2.4 Schritt 4: Automatisches Überwachen (Watch-Modus)

Für kontinuierliche Entwicklung verwenden Sie den Watch-Modus:

# Einzelne Datei überwachen
sass --watch input.scss:output.css

# Ganzes Verzeichnis überwachen
sass --watch sass/:css/

3.3 Integration in bestehende Projekte

3.3.1 Flask-Projekt-Integration: Schritt-für-Schritt

Schritt 1: Projektstruktur vorbereiten

Erstellen Sie folgende Verzeichnisstruktur in Ihrem Flask-Projekt:

your-flask-app/
├── app.py
├── static/
│   ├── css/           # Kompilierte CSS-Dateien (von Sass generiert)
│   └── scss/          # Ihre Sass-Quelldateien
│       ├── main.scss
│       ├── _variables.scss
│       └── components/
└── templates/

Schritt 2: Sass-Hauptdatei erstellen

Erstellen Sie static/scss/main.scss:

// Variablen importieren
@import 'variables';

// Bootstrap importieren (falls verwendet)
@import '../../node_modules/bootstrap/scss/bootstrap';

// Ihre eigenen Styles
.custom-header {
  background-color: $primary-color;
  padding: $base-padding;
}

Schritt 3: Variablen-Datei erstellen

Erstellen Sie static/scss/_variables.scss:

// Ihre Projekt-Farben
$primary-color: #2c3e50;
$secondary-color: #3498db;
$success-color: #27ae60;
$danger-color: #e74c3c;

// Abstände
$base-padding: 1rem;
$base-margin: 1rem;

// Breakpoints
$mobile: 768px;
$tablet: 1024px;
$desktop: 1200px;

Schritt 4: npm Scripts einrichten

Fügen Sie zu Ihrer package.json hinzu:

{
  "scripts": {
    "build-css": "sass static/scss/main.scss static/css/main.css",
    "watch-css": "sass --watch static/scss:static/css",
    "build-css-compressed": "sass --style compressed static/scss/main.scss static/css/main.min.css"
  },
  "devDependencies": {
    "sass": "^1.69.5"
  }
}

Schritt 5: HTML-Template anpassen

In Ihrem Flask-Template (templates/base.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ihre App</title>
    <!-- Kompiliertes CSS einbinden -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
    <!-- Ihr Content -->
</body>
</html>

3.3.2 Bootstrap-Integration mit Sass

Schritt 1: Bootstrap als Sass-Paket installieren

npm install bootstrap

Schritt 2: Bootstrap-Variablen überschreiben

Erstellen Sie static/scss/_bootstrap-overrides.scss:

// Bootstrap-Variablen vor dem Import überschreiben
$primary: #2c3e50;
$secondary: #3498db;
$font-family-base: 'Helvetica Neue', Arial, sans-serif;
$border-radius: 0.25rem;

// Nur benötigte Bootstrap-Komponenten importieren
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';

// Basis-Styles
@import '../../node_modules/bootstrap/scss/root';
@import '../../node_modules/bootstrap/scss/reboot';
@import '../../node_modules/bootstrap/scss/type';

// Layout
@import '../../node_modules/bootstrap/scss/grid';
@import '../../node_modules/bootstrap/scss/containers';

// Komponenten (nur was Sie brauchen)
@import '../../node_modules/bootstrap/scss/buttons';
@import '../../node_modules/bootstrap/scss/forms';
@import '../../node_modules/bootstrap/scss/navbar';
@import '../../node_modules/bootstrap/scss/card';

3.3.3 Migration bestehender CSS-Dateien

Schritt 1: CSS zu SCSS umbenennen

Bestehende .css Dateien können direkt zu .scss umbenannt werden. Sass versteht normales CSS vollständig.

Schritt 2: Schrittweise Sass-Features hinzufügen

Beginnen Sie mit einfachen Verbesserungen:

Vorher (CSS):

.header {
  background-color: #2c3e50;
  padding: 20px;
}

.header h1 {
  color: white;
  margin: 0;
}

.header .nav {
  list-style: none;
  margin: 10px 0;
}

Nachher (SCSS):

$header-bg: #2c3e50;
$header-padding: 20px;

.header {
  background-color: $header-bg;
  padding: $header-padding;
  
  h1 {
    color: white;
    margin: 0;
  }
  
  .nav {
    list-style: none;
    margin: ($header-padding / 2) 0;
  }
}

3.3.4 Entwicklungsworkflow einrichten

Automatisierung für Entwicklung:

Erstellen Sie ein watch.js Script:

const { spawn } = require('child_process');

// Sass Watch-Prozess starten
const sassWatch = spawn('sass', ['--watch', 'static/scss:static/css'], {
  stdio: 'inherit'
});

console.log('Sass-Überwachung gestartet...');
console.log('Änderungen an .scss-Dateien werden automatisch kompiliert.');

VS Code Integration:

Installieren Sie die “Sass” Extension und fügen Sie zu .vscode/settings.json hinzu:

{
  "scss.validate": true,
  "scss.completion.completePropertyWithSemicolon": true,
  "files.associations": {
    "*.scss": "scss"
  }
}

3.3.5 Praktische Übung

Erstellen Sie jetzt eine einfache Sass-Datei für Ihr Flask-Projekt:

Erstellen Sie die Verzeichnisstruktur wie oben beschrieben
Schreiben Sie eine main.scss mit Variablen für Ihre Projektfarben
Kompilieren Sie diese zu CSS
Binden Sie das CSS in ein Flask-Template ein
Testen Sie den Watch-Modus

Diese Grundlagen bereiten Sie optimal auf die erweiterten Sass-Funktionen in den folgenden Kapiteln vor.