Sass-Funktionen und Kontrollfluss
Schreiben Sie dynamische CSS-Logik mit integrierten Sass-Funktionen sowie den Direktiven @if, @each und @for.
Sass-Funktionen und Kontrollfluss ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Integrierte Sass-Funktionen
Sass stellt zahlreiche integrierte Funktionen zur Farbmanipulation, für mathematische Berechnungen, Zeichenkettenoperationen und vieles mehr bereit. Diese werden zur Kompilierungszeit ausgeführt.
<div class="darker">darken($base, 15%)</div>
<div class="lighter">lighten($base, 15%)</div>
<div class="faded">transparentize($base, 0.5)</div>
<div class="mixed">mix($base, white, 60%)</div>
Farbfunktionen
Wichtige Sass-Farbfunktionen:
darken($color, $amount)lighten($color, $amount)saturate($color, $amount)mix($color1, $color2, $weight)rgba($color, $alpha)color.scale($color, $lightness: 20%)
Benutzerdefinierte Funktionen mit @function
Definieren Sie wiederverwendbare Funktionen, die Werte zurückgeben (keine CSS-Regeln):
<h2 class="heading">Heading (2rem)</h2>
<p class="body">Body text (1.125rem)</p>
@if- und @else-Kontrollfluss
Geben Sie abhängig von Variablenwerten bedingt CSS aus:
<p class="text-large">Large text variant</p>
<p class="text-small">Small text variant</p>
<p class="text-default">Default text variant</p>
@each-Schleife
Durchlaufen Sie eine Liste oder Map, um mehrere Regeln zu erzeugen:
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
<button class="btn-success">Success</button>
@for-Schleife
Erzeugen Sie CSS für einen Wertebereich:
<div class="col-1">col-1 (20%)</div>
<div class="col-2">col-2 (40%)</div>
<div class="col-3">col-3 (60%)</div>
<div class="col-4">col-4 (80%)</div>
<div class="col-5">col-5 (100%)</div>
@while-Schleife
Wiederholen Sie eine Anweisung, solange eine Bedingung wahr ist. Verwenden Sie dies sparsam – @each und @for decken die meisten Fälle ab:
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
Sass-Maps
Maps sind Datenstrukturen aus Schlüssel-Wert-Paaren in Sass:
<div class="box">Responsive box (resize wider than 768px to see color change)</div>
@error, @warn und @debug
Sass stellt drei Diagnosefunktionen bereit:
@error: bricht die Kompilierung mit einer Meldung ab@warn: protokolliert eine Warnung, ohne den Vorgang abzubrechen@debug: protokolliert während der Entwicklung einen Wert
Interpolation #{...}
Verwenden Sie #{$variable}, um Variablenwerte in Selektoren, Eigenschaftsnamen oder Media Queries einzufügen:
<p class="element">Interpolated property (#{$property})</p>
Kurzer Test
Was ist der Unterschied zwischen einem Sass-@mixin und einer Sass-@function?
Zusammenfassung
In Sass ermöglichen integrierte Farbfunktionen (darken, lighten, mix) die Farbänderung zur Kompilierzeit. Eine benutzerdefinierte @function gibt einen berechneten Wert zurück. Mit @if/@else lässt sich eine bedingte Ausgabe erzeugen. @each durchläuft Listen und Maps. @for durchläuft Zahlenbereiche. Diese Funktionen ermöglichen leistungsfähige, DRY-Stylesheets mit minimaler Wiederholung.
Häufig gestellte Fragen
Ist die Lektion „Sass-Funktionen und Kontrollfluss“ kostenlos?
Ja — der vollständige Text von „Sass-Funktionen und Kontrollfluss“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Sass-Funktionen und Kontrollfluss“?
Schreiben Sie dynamische CSS-Logik mit integrierten Sass-Funktionen sowie den Direktiven @if, @each und @for. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Sass-Funktionen und Kontrollfluss“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Variablen, Verschachtelung und Partials
- Mixins und Includes
- Extend- und Platzhalter-Selektoren
- Sass-Funktionen und Kontrollfluss