SCSS Variables - Wiederverwendbare Werte

Variables sind das Fundament für wartbaren SCSS Code.

Variable Basics

Syntax

$variable-name: value;

// Beispiele
$primary-color: #007bff;
$font-size: 16px;
$border-radius: 4px;
$max-width: 1200px;

Usage

$primary-color: #007bff;

.button {
  background: $primary-color;
  border: 1px solid $primary-color;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

Variable Types

Colors

// Primary Colors
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;

// Grays
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-800: #343a40;
$gray-900: #212529;

// Usage
.alert-danger {
  background: $danger;
  color: white;
}

Typography

// Font Families
$font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
$font-heading: Georgia, serif;
$font-mono: "Courier New", monospace;

// Font Sizes
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;

// Font Weights
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;

// Line Heights
$line-height-sm: 1.2;
$line-height-base: 1.5;
$line-height-lg: 1.8;

Spacing

// Spacing Scale
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;

// Usage
.card {
  padding: $spacing-md;
  margin-bottom: $spacing-lg;
}

Breakpoints

$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

// Usage
@media (min-width: $breakpoint-md) {
  .container {
    max-width: 720px;
  }
}

Variable Scope

Global Variables

// _variables.scss
$primary-color: blue;

// Überall verfügbar nach @use

Local Variables

.component {
  $local-padding: 10px; // Nur in .component sichtbar
  padding: $local-padding;
}

.other {
  padding: $local-padding; // ❌ Error: Undefined
}

!global Flag

.component {
  $padding: 10px !global; // Wird global
}

.other {
  padding: $padding; // ✅ OK
}

Default Values

Mit !default können Werte überschrieben werden:

// _library.scss
$primary-color: blue !default;
$font-size: 16px !default;

// main.scss
$primary-color: red; // Überschreibt blue
@use "library";

// Library nutzt jetzt red statt blue

Variable Interpolation

Variables in Selektoren und Property Names:

$side: left;
$property: margin;

.box {
  #{$property}-#{$side}: 10px;
  // Ergibt: margin-left: 10px;
}

// Mit Selektoren
$prefix: btn;

.#{$prefix}-primary {
  background: blue;
}
// Ergibt: .btn-primary

Maps für strukturierte Data

$colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
  "danger": #dc3545
);

// Zugriff mit map-get
.btn-primary {
  background: map-get($colors, "primary");
}

// Iteration
@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
  }
}

Nested Maps

$theme: (
  "colors": (
    "primary": #007bff,
    "secondary": #6c757d
  ),
  "spacing": (
    "sm": 8px,
    "md": 16px,
    "lg": 24px
  ),
  "fonts": (
    "body": "Arial, sans-serif",
    "heading": "Georgia, serif"
  )
);

// Zugriff
$primary: map-get(map-get($theme, "colors"), "primary");
// Oder mit SASS Module System
@use "sass:map";
$primary: map.get(map.get($theme, "colors"), "primary");

// _variables.scss

// ========================================
// Colors
// ========================================

// Brand Colors
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;
$light: #f8f9fa;
$dark: #343a40;

// Gray Scale
$white: #ffffff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000000;

// ========================================
// Typography
// ========================================

$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
$font-family-heading: Georgia, "Times New Roman", serif;
$font-family-mono: "Courier New", Courier, monospace;

$font-size-base: 1rem; // 16px
$font-size-sm: 0.875rem; // 14px
$font-size-lg: 1.125rem; // 18px
$font-size-xl: 1.25rem; // 20px

$h1-font-size: 2.5rem; // 40px
$h2-font-size: 2rem; // 32px
$h3-font-size: 1.75rem; // 28px
$h4-font-size: 1.5rem; // 24px
$h5-font-size: 1.25rem; // 20px
$h6-font-size: 1rem; // 16px

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;

$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 1.75;

// ========================================
// Spacing
// ========================================

$spacer: 1rem;
$spacing-xs: $spacer * 0.25; // 4px
$spacing-sm: $spacer * 0.5; // 8px
$spacing-md: $spacer; // 16px
$spacing-lg: $spacer * 1.5; // 24px
$spacing-xl: $spacer * 2; // 32px
$spacing-xxl: $spacer * 3; // 48px

// ========================================
// Layout
// ========================================

$container-max-width: 1200px;
$grid-gutter: $spacing-md;

$border-radius-sm: 0.25rem; // 4px
$border-radius: 0.375rem; // 6px
$border-radius-lg: 0.5rem; // 8px
$border-radius-xl: 1rem; // 16px
$border-radius-pill: 50rem;
$border-radius-circle: 50%;

$border-width: 1px;
$border-color: $gray-300;

// ========================================
// Shadows
// ========================================

$shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
$shadow: 0 0.5rem 1rem rgba($black, 0.15);
$shadow-lg: 0 1rem 3rem rgba($black, 0.175);

// ========================================
// Transitions
// ========================================

$transition-base: all 0.2s ease-in-out;
$transition-fade: opacity 0.15s linear;
$transition-collapse: height 0.35s ease;

// ========================================
// Z-Index
// ========================================

$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-popover: 1060;
$zindex-tooltip: 1070;

// ========================================
// Breakpoints
// ========================================

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// ✅ Gut - beschreibend
$primary-color: blue;
$button-padding: 10px;
$header-height: 60px;

// ❌ Schlecht - unklar
$color1: blue;
$padding: 10px;
$height: 60px;

// ❌ Farbname
$blue: #007bff;
.button {
  background: $blue; // Was wenn Design ändert?
}

// ✅ Semantischer Name
$primary-color: #007bff;
.button {
  background: $primary-color; // Besser!
}

// SCSS Variables (compile-time)
$primary: blue;

// CSS Custom Properties (runtime)
:root {
  --primary: blue;
}

.button {
  background: var(--primary);
}

// Mix von beiden
$primary: blue;
:root {
  --primary: #{$primary};
}

$blue: #007bff;
$padding: 10px;
$size: 16px;

$color-primary: #007bff;
$spacing-md: 10px;
$font-size-base: 16px;

.button {
  padding: 12px 24px;
  margin-bottom: 16px;
  border-radius: 4px;
}

$button-padding-y: 12px;
$button-padding-x: 24px;
$spacing-md: 16px;
$border-radius: 4px;

.button {
  padding: $button-padding-y $button-padding-x;
  margin-bottom: $spacing-md;
  border-radius: $border-radius;
}

$primary: blue;
$spacing: 10px;
$secondary: gray;
$font-size: 16px;
// Alles durcheinander

// Colors
$primary: blue;
$secondary: gray;

// Spacing
$spacing-sm: 8px;
$spacing-md: 16px;

// Typography
$font-size-base: 16px;

Nächste Schritte

Als Nächstes lernst du:

• Nesting Patterns
• Mixins für wiederverwendbare Styles
• Functions für Berechnungen
• Partials und Module System

Viel Erfolg! 🚀