Hauptmenü

Untermenü

SCSS - Überblick

1. Vorwort

Ein Hinweis in eigener Sache.

Eigentlich ist Sass/SCSS schon ein alter Hut. Da ich mir aber über zwei Jahre lang eine Auszeit gegönnt habe, muss ich mittlerweile eine ganze Menge von dem abarbeiten, was ich mir in der Zeit angeeignet habe. Und das gehört auch dazu. Außerdem benutze ich meinen Auftritt als internes Nachschlagewerk und darum darf das Thema nicht fehlen.

2. Eine noch schönere Welt

Habt ihr euch auch schon mal gefragt, wie man seine CSS-Anweisungen optimal aufbaut? Und habt ihr auch nach Jahren noch immer keine wirklich saubere Lösung für dieses Problem gefunden?

Willkommen im Club

Selbst ich, der nun schon seit über 12 Jahren konsequent mit CSS arbeitet, habe immer wieder den Tag meiner Geburt verflucht, wenn ich in einem größerem Projekt feststellen musste, dass ich mal wieder etwas über- oder untertrieben habe.

3. Stylesheet-Sprachen

Und weil wir nicht die Einzigen sind, die sich ständig mit den eingeschränkten Möglichkeiten von CSS herumschlagen müssen, haben ein paar kluge Leute so genannte Präprozessorsprachen entwickelt. Dabei handelt es sich einfach gesagt um individuell vorgegebene "Übersprachen/Obermengen" von CSS.

Vorteile

Nachteile

4. Sass/SCSS

... ist nach meiner persönlichen Einschätzung die populärste Möglichkeit. Das ist auch der Grund, warum ich die hier vorstelle (und weil ich die anderen nicht kenne). Andere Varianten sind zum Beispiel Less oder Stylus.

Der Unterschied ...

... zwischen Sass und SCSS ist einfach gesagt marginal. Bei Sass gibt es keine geschweiften Klammern, bei SCSS schon. Außerdem gibt es ein paar Feinheiten bezüglich der Syntax, auf die ich aber nicht eingehen werde, da ich mich ausschließlich auf die meiner Meinung nach übersichtlichere Variante, also SCSS konzentrieren werde.

Für die Pedanten

SCSS ist so aufgebaut, dass jeder saubere CSS-Code automatisch valider SCSS-Code ist. Zufrieden?

5. Komplexität

Wer jetzt denkt, "och Gott, muss ich wieder eine neue Sprache lernen", dem sei Folgendes gesagt. SCSS ist geradezu idiotisch einfach. Jeder Vollhorst, der sich auch nur einigermaßen mit CSS auskennt, lernt das in ein paar Stunden. Und wird danach so begeistert sein, dass er/sie nicht mehr darauf verzichten möchte.

6. Tutorials

Tja, die wird es nicht geben. Dieses Thema ist so pisselig einfach, dass ich mich schämen würde, wenn ihr das nicht alleine auf die Reihe bekommt. Außerdem werde ich relativ wenig zu den einzelnen Punkten sagen, sondern mich primär auf Codebeispiele konzentrieren. Denn der spricht für sich. Ansonsten gelten dieselben Regeln wie bei CSS. Übung macht den Meister.

weiter zum nächsten Abschnitt