Sprich für Sass (2021)

Hinweis: Dieser Beitrag war auch Gegenstand eines Hacker News-Threads.

Hinweis, 04.04.2021: Ich habe diesen Artikel bearbeitet, um einige Verweise zu entfernen, die, wie ein Leser zu Recht feststellte, nicht ganz mit dem übereinstimmten, was ich sagen wollte. (Eines Tages werde ich lernen, diese Songs am späten Freitagabend nicht zu schreiben, wenn ich wirklich, wirklich müde bin.)

Es ist mir wichtig, über Trends auf dem Laufenden zu bleiben, die sich auf meine Bemühungen bei der Webentwicklung auswirken. Das stimmt, egal ob es sich um die Websites handelt, die ich für meinen täglichen Job betreibe, oder nur um die Basteleien, die ich an dieser persönlichen Website mache.

Zum Beispiel habe ich kürzlich nicht nur Tailwind CSS geschrieben und ausgiebig verwendet, sondern auch seinen neuen experimentellen Just-In-Time (JIT)-Compiler. Die Attraktivität von Tailwind für Webentwickler, insbesondere diejenigen, die nicht besonders gerne mit CSS herumspielen, ist stark und wächst.

Trotzdem gibt es viel für altbewährte Styling-Methoden zu sagen, die vor Jahren existierten, lange bevor es Tailwind und andere Beispiele für New Shiny CSS gab. Und heute bin ich hier, um einige dieser "Aussagen" zur Unterstützung eines von ihnen zu verwenden: nämlich des Sass-CSS-Präprozessors.

Sass - "Syntactically Awesome Style Sheets" - wurde 2006 geboren und fast von Anfang an war einer seiner Hauptslogans, dass "CSS wieder Spaß macht". Auch wenn ich dieser Meinung manchmal widerspreche, stimme ich dem Titel der Sass-Website seit 2013 vollkommen zu: „CSS mit Superkräften“.

Und lassen Sie mich hier für diejenigen aufhören, die jetzt schon meckern: "Ja, aber heutzutage kann man mit einfachem, grundlegendem CSS so viel mehr machen als zu der Zeit, als Sass neu und heiß war, also wer braucht das heute noch?" Meine einfache Antwort lautet: Sie könnten, wenn Sie Websites unterstützen, die für die Verwendung in Unternehmen oder Behörden bestimmt sind.

Das liegt daran, dass dies normalerweise Orte sind, an denen der schreckliche Internet Explorer 11 noch am Leben ist und es ihm gut geht (ich würde vorher keine Zeit damit verschwenden, mir Gedanken über eine IE-Version zu machen), oft aufgrund der Notwendigkeit, ältere Anwendungen oder Dateien zu unterstützen, die dies erfordern . IE 11 ist vollständig inkompatibel mit einer der coolsten Funktionen von modernem CSS, benutzerdefinierten CSS-Eigenschaften ("CSS-Variablen"). Wie ich in Kürze erklären werde, kann die Verwendung von Variablen in CSS eine enorme Zeit- und Arbeitsersparnis für die Webentwicklungsarbeit sein, insbesondere wenn Ihre Projekte wachsen. Aber Sass lässt Sie Variablen verwenden – auf seine eigene Weise, um fair zu sein – während es immer noch CSS generiert, das sogar IE 11 lesen kann.

Aber auch wenn Sie sich keine Sorgen um IE 11-Benutzer machen müssen, ist Sass immer noch eine unglaublich attraktive Option für Ihre CSS-Arbeit.

Wenn Sie mit Sass nicht vertraut sind, sein Vorschlag ist einfach: Sie erstellen Styling-Anweisungen in einer Sass-Datei, normalerweise als .scss-Datei, und Sass übersetzt sie automatisch in normales CSS, das ein Browser verarbeiten kann. Eine wichtige Sache, die Sie sich merken sollten, ist, dass der gesamte gültige CSS-Code in einer .scss-Datei funktioniert. Sie können also mit den Grundlagen beginnen, und wenn Sie mehr darüber erfahren, was Sass möglich macht, fügen Sie die Vorteile von Sass hinzu.

Welche Geschenke, fragen Sie? Probieren Sie sie aus.

CSS-Variablen sind großartig, weil es mühsam ist, immer wieder dieselben Attribute zu verwenden; aber wenn ältere Browser mit modernen CSS-Variablen nicht umgehen können, haben Sie Pech, oder? Schlecht. Verwenden Sie einfach Sass-Variablen. Denken Sie daran, dass alles, was der Browser sieht, die Werte der Variablen sind, nicht die Variablen selbst.

Ein typischer Anwendungsfall beinhaltet Farben und Haltepunkte, die Sie benötigen, um auf einer Website den Überblick zu behalten, insbesondere wenn mehrere Personen Stilcode berühren (d. h. < /em>, manche finden es einfacher, sich eine Variable zu merken Name, oder zumindest um ihn für andere anzugeben, als ein Hex-Wert oder ein Pixelgrößenwert):

$ourClr: hsl(336, 58 %, 57 %); $lkClr: hsl(5, 78 %, 41 %); $mdBkpt: 768px; @media screen und (min-width: $mdBkpt) { Karosserie { Polsterung: 01,5 cm; } } .logoType { Farbe: $ourClr; Schriftstärke: 625; } a, a:fokus, a:besucht { Farbe: $lkClr; Textdekoration: keine; unterer Rand: 1px solide $lkClr; }

Während PostCSS es Ihnen erlaubt, Selektoren in Elternselektoren zu verschachteln, ...