SCSS / Sass Formatter & Beautifier

SCSS (Sassy CSS) und Sass sind zwei Syntaxen für denselben Präprozessor. SCSS verwendet geschweifte Klammern und Semikolons wie reguläres CSS – jedes gültige CSS ist auch gültiges SCSS. Die eingerückte Sass-Syntax verwendet Einrückungen anstelle von Klammern und Zeilenumbrüche anstelle von Semikolons. SCSS ist weitaus beliebter, da es für CSS-Entwickler vertraut und leichter schrittweise einzuführen ist. Die meisten modernen Projekte verwenden die Dateiendung .scss.

SCSS-Variablen (deklariert mit $) speichern wiederverwendbare Werte wie Farben, Schriftgrößen, Abstände und Breakpoints. Zum Beispiel ermöglicht $primary-color: #3498db; die Referenzierung derselben Farbe in Ihrem gesamten Stylesheet und deren Änderung an einer Stelle. Während CSS-Custom-Properties (--variable) jetzt nativ eine ähnliche Funktionalität bieten, sind SCSS-Variablen Werte zur Kompilierungszeit, die leistungsfähigere Funktionen wie Interpolation in Selektoren und mathematische Operationen ermöglichen.

SCSS-Nesting ermöglicht es Ihnen, Kindselektoren innerhalb von Elternselektoren zu schreiben, was Ihre HTML-Struktur widerspiegelt. Zum Beispiel wird .nav { .item { color: blue; } } zu .nav .item { color: blue; } kompiliert. Nesting verbessert die Lesbarkeit für zusammengehörige Stile, aber übermäßiges Nesting (mehr als 3-4 Ebenen tief) erzeugt übermäßig spezifische Selektoren, die schwer zu überschreiben sind. Die allgemeine Regel: verschachteln für die Struktur, nicht für jede Eltern-Kind-Beziehung.

@mixin erstellt wiederverwendbare CSS-Blöcke, die überall dort kopiert werden, wo sie @include werden – wie eine Funktion, die CSS ausgibt. @extend teilt die Stile eines Selektors, indem es den erweiternden Selektor zur ursprünglichen Regel hinzufügt – es gruppiert Selektoren, anstatt Code zu duplizieren. Verwenden Sie @mixin, wenn Sie Parameter benötigen oder wenn die Stile zwischen den Verwendungen variieren. Verwenden Sie @extend für einfache Stilvererbung, bei der Sie eine minimale CSS-Ausgabe wünschen. Übermäßige Verwendung von @extend kann unerwartete Selektorketten erzeugen.