SCSS/SASS Einführung - CSS mit Superkräften

SCSS/SASS erweitert CSS um Features die professionelles Styling einfacher machen.

Was ist SCSS/SASS?

SASS (Syntactically Awesome Style Sheets) ist ein CSS-Preprocessor. SCSS (Sassy CSS) ist die neuere Syntax von SASS.

// SCSS - sieht aus wie CSS
.button {
  color: blue;
  &:hover {
    color: red;
  }
}

// SASS - ohne {} und ;
.button
  color: blue
  &:hover
    color: red

Empfehlung: Nutze SCSS - es ist CSS-kompatibel!

Warum SCSS?

Problem mit CSS

/* CSS - viel Wiederholung */
.button-primary {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

.button-secondary {
  background-color: #6c757d;
  color: white;
  padding: 10px 20px;
}

.button-success {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
}

Lösung mit SCSS

// SCSS - DRY (Don't Repeat Yourself)
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;

@mixin button-base {
  color: white;
  padding: 10px 20px;
}

.button-primary {
  @include button-base;
  background-color: $primary-color;
}

.button-secondary {
  @include button-base;
  background-color: $secondary-color;
}

.button-success {
  @include button-base;
  background-color: $success-color;
}

SCSS Setup

Installation

# Mit npm
npm install -D sass

# Mit yarn
yarn add -D sass

Kompilieren

# Einmal kompilieren
sass input.scss output.css

# Watch Mode
sass --watch input.scss:output.css

# Ordner kompilieren
sass --watch scss:css

Package.json Scripts

{
  "scripts": {
    "sass": "sass --watch scss:css",
    "sass:build": "sass scss:css --style compressed"
  }
}

Mit Vite/Webpack

npm install -D sass

# Vite/Webpack erkennen .scss automatisch

// main.ts
import "./styles/main.scss"

SCSS vs CSS

| Feature | CSS | SCSS | |---------|-----|------| | Variables | ✅ (CSS Custom Props) | ✅ | | Nesting | ❌ | ✅ | | Mixins | ❌ | ✅ | | Functions | ❌ | ✅ | | Partials | ❌ | ✅ | | Extending | ❌ | ✅ | | Control Flow | ❌ | ✅ |

Grundlegende Features

Variables

// SCSS
$primary-color: #007bff;
$font-size: 16px;
$border-radius: 4px;

.button {
  background: $primary-color;
  font-size: $font-size;
  border-radius: $border-radius;
}

Nesting

// SCSS
.nav {
  background: white;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    padding: 10px;

    &:hover {
      background: blue;
    }
  }
}

Kompiliert zu:

.nav {
  background: white;
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li {
  display: inline-block;
}
.nav a {
  text-decoration: none;
  padding: 10px;
}
.nav a:hover {
  background: blue;
}

Partials & Imports

// _variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;

// _buttons.scss
.button {
  padding: 10px 20px;
  border: none;
}

// main.scss
@use "variables";
@use "buttons";

.primary-button {
  background: variables.$primary-color;
}

Mixins

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

SCSS in Action

// _variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;
$danger-color: #dc3545;
$success-color: #28a745;

$border-radius: 4px;
$transition: all 0.3s ease;

// _mixins.scss
@mixin button-variant($bg-color, $hover-color) {
  background-color: $bg-color;
  border-color: $bg-color;
  transition: $transition;

  &:hover {
    background-color: $hover-color;
    border-color: $hover-color;
  }
}

// buttons.scss
@use "variables" as *;
@use "mixins" as *;

.btn {
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: $border-radius;
  cursor: pointer;
  font-size: 16px;
  color: white;

  &-primary {
    @include button-variant($primary-color, darken($primary-color, 10%));
  }

  &-secondary {
    @include button-variant($secondary-color, darken($secondary-color, 10%));
  }

  &-danger {
    @include button-variant($danger-color, darken($danger-color, 10%));
  }

  &-success {
    @include button-variant($success-color, darken($success-color, 10%));
  }

  &-sm {
    padding: 5px 10px;
    font-size: 14px;
  }

  &-lg {
    padding: 15px 30px;
    font-size: 18px;
  }
}

SCSS File Structure

scss/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   └── _forms.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
└── main.scss

main.scss:

@use "abstracts/variables";
@use "abstracts/mixins";
@use "base/reset";
@use "base/typography";
@use "components/buttons";
@use "components/cards";
@use "layout/header";
@use "layout/footer";

// .prettierrc
{
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "singleQuote": false,
        "tabWidth": 2
      }
    }
  ]
}

# Für Debugging
sass --watch scss:css --source-map

@import "variables";
@import "mixins";

@use "variables";
@use "mixins";

.nav {
  ul {
    li {
      a {
        span {
          color: blue; // 5 Ebenen!
        }
      }
    }
  }
}

.nav-link {
  color: blue;
}

// Eine riesige main.scss mit allem

// Aufgeteilt in Partials
@use "components/buttons";
@use "components/cards";

Verwandte Module

Voraussetzungen:

• 🎨 CSS Grundlagen - Solide CSS-Kenntnisse sind erforderlich für SCSS
• 📐 CSS Flexbox - Flexbox funktioniert perfekt mit SCSS
• 📊 CSS Grid - Grid Layouts mit SCSS-Power

SCSS in der Praxis:

• 🌙 SCSS Dark Mode - Theme Switching mit SCSS
• ✨ SCSS Animations - Professionelle Animationen

Nächste Schritte

Als Nächstes lernst du:

• Variables im Detail
• Nesting Patterns
• Mixins und Functions
• Partials und Module System

Viel Erfolg! 🚀