Zurück zu Modulen
Paintbrush

SCSS/SASS

Fortgeschritten

CSS mit Superkräften. Variables, Nesting, Mixins und modernes Styling.

13 Artikel
Interaktive Beispiele

0 von 13 Artikeln abgeschlossen (0%)

Tutorial starten

Lernpfad

Arbeite die Kapitel in der vorgeschlagenen Reihenfolge durch

1

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

Lerne SCSS/SASS kennen - den CSS-Preprocessor der dein Styling-Leben einfacher macht. Variables, Nesting und mehr.

2

SCSS Variables - Wiederverwendbare Werte

Lerne SCSS Variables für konsistente Design-Systeme. Colors, Sizes, Breakpoints und mehr organisieren.

3

SCSS Nesting - Hierarchische Styles

Lerne SCSS Nesting für strukturierte und lesbare Stylesheets. Parent Selector, BEM Pattern und Best Practices.

4

SCSS Mixins - Wiederverwendbare Style-Blöcke

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

5

SCSS Functions - Berechnungen und Logik

Lerne SCSS Functions für Berechnungen, Farbmanipulation und Custom Functions.

6

SCSS Partials & Imports - Modularer Code

Lerne SCSS Code mit Partials und dem @use System zu organisieren. Module System, Namespaces und Best Practices.

7

SCSS Extend & Inheritance - DRY mit @extend

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

8

SCSS Operators - Berechnungen im Stylesheet

Lerne SCSS Operators für mathematische Berechnungen, Vergleiche und String-Operations.

9

SCSS Control Directives - Logik im Stylesheet

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

10

SCSS Best Practices - Professioneller Workflow

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

11

SCSS Final Project - Professional Landing Page

Baue eine vollständige Landing Page mit SCSS. Variables, Mixins, Responsive Design und moderne Patterns.

12

SCSS Dark Mode - Theme Switching

Implementiere professionelles Dark Mode Theming mit SCSS. CSS Variables, prefers-color-scheme und Theme Toggle.

13

SCSS Animations - CSS Animations & Transitions

Meistere CSS Animations mit SCSS. Keyframes, Transitions, Transform und Animation Libraries für moderne Web-Effekte.