Fortgeschritten132025-01-15

SCSS Mixins - Wiederverwendbare Style-Blöcke

Lerne Mixins für DRY SCSS Code. Parameter, Default Values, Content Blocks und praktische Beispiele.

#scss#mixins#dry#reusable

SCSS Mixins - Wiederverwendbare Style-Blöcke

Mixins sind wiederverwendbare Style-Blöcke - das Herzstück von DRY SCSS.

Mixin Basics

Definition und Usage

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

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

// Kompiliert zu:
// .container {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   height: 100vh;
// }

Mixins mit Parametern

@mixin button($bg-color, $text-color) {
  background: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

.btn-primary {
  @include button(blue, white);
}

.btn-danger {
  @include button(red, white);
}

Default Values

@mixin box-shadow($x: 0, $y: 2px, $blur: 4px, $color: rgba(0, 0, 0, 0.1)) {
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow; // Nutzt Defaults
}

.modal {
  @include box-shadow(0, 4px, 8px, rgba(0, 0, 0, 0.2));
}

Content Blocks

@mixin respond-to($breakpoint) {
  @if $breakpoint == "mobile" {
    @media (max-width: 767px) {
      @content;
    }
  } @else if $breakpoint == "tablet" {
    @media (min-width: 768px) and (max-width: 991px) {
      @content;
    }
  } @else if $breakpoint == "desktop" {
    @media (min-width: 992px) {
      @content;
    }
  }
}

.sidebar {
  width: 300px;

  @include respond-to("mobile") {
    width: 100%;
  }

  @include respond-to("tablet") {
    width: 250px;
  }
}

Praktische Mixin-Beispiele

Centering

@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

Typography

@mixin font($size, $weight: 400, $line-height: 1.5) {
  font-size: $size;
  font-weight: $weight;
  line-height: $line-height;
}

@mixin truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Buttons

@mixin button-variant($bg, $hover-bg: darken($bg, 10%)) {
  background: $bg;
  border: 1px solid $bg;
  transition: all 0.3s ease;

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

Spacing

@mixin spacing($property, $size) {
  #{$property}: $size;
}

@mixin margin-x($size) {
  margin-left: $size;
  margin-right: $size;
}

@mixin padding-y($size) {
  padding-top: $size;
  padding-bottom: $size;
}
Complete Mixin Library
// _mixins.scss

// ========================================
// Layout Mixins
// ========================================

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

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

@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// ========================================
// Typography Mixins
// ========================================

@mixin heading($size, $weight: 700) {
  font-size: $size;
  font-weight: $weight;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

@mixin truncate($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// ========================================
// Button Mixins
// ========================================

@mixin button-base {
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

@mixin button-variant($bg, $color: white, $hover-bg: darken($bg, 10%)) {
  @include button-base;
  background: $bg;
  color: $color;
  border-color: $bg;

  &:hover:not(:disabled) {
    background: $hover-bg;
    border-color: $hover-bg;
  }
}

// ========================================
// Responsive Mixins
// ========================================

@mixin respond-to($breakpoint) {
  $breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
  );

  @if map-has-key($breakpoints, $breakpoint) {
    $value: map-get($breakpoints, $breakpoint);
    @media (min-width: $value) {
      @content;
    }
  }
}

// ========================================
// Visual Effects
// ========================================

@mixin shadow($level: 1) {
  @if $level == 1 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  } @else if $level == 2 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  } @else if $level == 3 {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
}

@mixin transition($properties...) {
  transition-property: $properties;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

// ========================================
// Grid & Columns
// ========================================

@mixin grid($cols: 12, $gap: 20px) {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  gap: $gap;
}

@mixin columns($count, $gap: 20px) {
  column-count: $count;
  column-gap: $gap;
}

📝 Quiz

Was ist der Unterschied zwischen @mixin und @function?

⚡

Tipps & Tricks

Variable Arguments

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}

.card {
  @include box-shadow(
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.05)
  );
}

Mixin mit Map

@mixin config($map) {
  @each $key, $value in $map {
    #{$key}: $value;
  }
}

.box {
  @include config((
    padding: 20px,
    margin: 10px,
    background: blue
  ));
}

Conditional Mixins

@mixin button($variant: primary) {
  padding: 10px 20px;

  @if $variant == primary {
    background: blue;
  } @else if $variant == secondary {
    background: gray;
  } @else {
    background: white;
  }
}
❌

Häufige Fehler

Fehler 1: Zu komplexe Mixins

❌ SCHLECHT:

@mixin everything($bg, $color, $padding, $margin, $border, $radius) {
  // Zu viele Parameter!
}

✅ BESSER:

@mixin button-base { /* Basis */ }
@mixin button-variant($bg) { /* Variante */ }

Fehler 2: Mixins statt Variables

❌ UNNÖTIG:

@mixin primary-color {
  color: blue;
}

✅ BESSER:

$primary-color: blue;

.text {
  color: $primary-color;
}

Fehler 3: Content ohne @content

❌ FEHLT:

@mixin responsive {
  @media (max-width: 768px) {
    // Fehlt @content
  }
}

✅ RICHTIG:

@mixin responsive {
  @media (max-width: 768px) {
    @content;
  }
}
🎯

Zusammenfassung

Du hast gelernt:

  • ✅ Mixins mit @mixin definieren
  • ✅ @include zum Verwenden
  • ✅ Parameter mit Default Values
  • ✅ @content für flexible Blocks
  • ✅ Praktische Mixin-Bibliothek
  • ✅ Responsive Mixins

Key Takeaways:

  • Mixins für wiederverwendbare Styles
  • Parameter für Flexibilität
  • @content für Custom Content
  • Nicht zu komplex machen
  • Mixin-Library anlegen

Nächste Schritte

Als Nächstes lernst du:

  • Functions für Berechnungen
  • Extend/Inheritance
  • Partials und Imports
  • Control Directives

Viel Erfolg! 🚀

← SCSS/SASS•Lektion 4 von 13
31% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "SCSS Mixins - Wiederverwendbare Style-Blöcke" abgeschlossen

Vorherige Lektion
SCSS Nesting - Hierarchische Styles
Nächste Lektion
SCSS Functions - Berechnungen und Logik
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

SCSS Best Practices - Professioneller Workflow

Lerne die wichtigsten Best Practices für wartbaren, performanten SCSS Code. Do's and Don'ts für Production.

Fortgeschrittenscss

SCSS Control Directives - Logik im Stylesheet

Lerne @if, @for, @each und @while für dynamische Styles und Design Systems.

Fortgeschrittenscss

SCSS Extend & Inheritance - DRY mit @extend

Lerne @extend für Style-Inheritance. Placeholder Selectors, Best Practices und wann Mixins besser sind.

Fortgeschrittenscss
Zurück zu SCSS/SASS