Als wir letztes Jahr den Weihnachtsbaum kauften, bekamen wir einen kleinen Setzling dazu. Also wir konnten entscheiden, ob wir einen Setzling oder zehn Eier wollen, und naja, was wir entschieden uns natürlich für die coolere Variante. Jetzt müsste man nur regelmäßig gießen und schwupps hat man in nur einem Jahrzehnt oder so einen kostenlosen Baum, während sich niemand mehr an die Eier erinnern würde.

Als wir ihn vor einem Monat bekamen, waren nur die unteren, dunkelgrünen, Nadeln dran, vor ein paar Tagen ist nun die nächste Reihe Nadeln geschlüpft. Noch könnte man jeder Nadel einen Namen geben, ich bin gespannt, wie es sich weiter entwickelt!

Jahrhunderte lang benutzte ich Sass für alles mögliche. Wenn man vorher nur normales CSS schrieb war das ja auch eine Offenbarung, Variablen, Loops und Nesting! Naja. Wie das so ist, benutzt man sowas dann Ewigkeiten und hinterfragt es auch nie wirklich.

Nun kaufte ich aber ja diesen M1 Mac und musste meine gesamte Entwicklungsumgebung neu einrichten und habe diverse Probleme, die ich damals schon mit verschiedensten Legacy-Projekten hatte - node-sass. Teilweise habe ich Projekte mit Node 9 betrieben, weil ich den node_modules-Ordner nicht löschen und mit einer aktuelleren Node-Version wiederherstellen wollte, weil jedes mal irgendwas beim Kompilieren von libsass kaputt war. Kurz austauschen durch die modernere Variante, die in Dart implementiert ist, ersetzen war leider auch nie drin, man hat ja nie Zeit (und Lust) für sowas, vor allem, wenn der Quickfix, einfach kurz Node 9 benutzen, so nahe liegt. Also, bei Projekten, die man halt alle 6 Monate mal öffnet, um eine Zeile Code zu ändern.

Das Problem war nun etwas ausgeprägter, da die Node-Version nicht half, da libsass anscheinend auf M1 Macs einfach gar nicht kompiliert, zumindest bekam ich es nicht dazu. Hier und da habe ich mich also dazu durchgerungen, den beschwerlichen weg zu gehen und die Dependencies auszutauschen, was meistens auch ganz gut funktionierte, für ein paar egalere und kleinere Projekte, wie diesen Blog hier, zum Beispiel, überlegte ich mir allerdings mal, wozu ich Sass überhaupt noch brauche. Schon vor Monaten fing ich hier an, das CSS meistens einfach in <style>-Tags mit ins Blog-Template zu schreiben, als normales CSS, sorry, es ist ja nur mein Blog.

Ansonsten kann CSS mittlerweile auch Variablen und Nesting ist auch in einer (noch nicht umgesetzten) Spezifikation, lässt sich aber mit einem Tool wie PostCSS leicht nachrüsten. Die ganzen anderen Sass-Features habe ich eh eigentlich nie benutzt.

Jetzt tausche ich also den Sass-Postprocessor, den ich über mein CSS jage gegen PostCSS, was habe ich dadurch gewonnen, könnte man sich fragen. Ist wahrscheinlich auch ein berechtigter Einwand, trotzdem spart man sich eine Abhängigkeit (von sass) und PostCSS ist wahrscheinlich eh schon in vielen Stacks drin (bei mir selbst in diesen uralt-Projekten, wegen dem autoprefixer) und zum anderen schreibt man immerhin schonmal theoretisch, in der Zukunft, gültiges CSS – wenn der Build-Prozess in ein paar Jahren also mal wieder nicht funktioniert, aber die Browser die CSS-Spec dafür implementiert haben, kann man ihn auch einfach weglassen. Juchu.

Um das zu bewerkstelligen, braucht ihr nur Folgendes installieren:

npm install --save postcss postcss-preset-env

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv({
        stage: 0
    })
  ]
}

./node_modules/.bin/postcss test.css

/* Vorher */
div {
    & p {
        font-size:  12px;

        & .fett {
            font-weight: bold;
        }
    }
}

/* Nachher */
    div p {
        font-size:  12px
    }
div p .fett {
            font-weight: bold;
        }

Abgesehen vom abenteuerlichen Whitespace ist das Nesting nun korrekt aufgelöst. Leider muss man hier natürlich beachten, dass das Nesting nicht genau so funktioniert wie bei Sass, um genau zu sein braucht man hier immer noch so ein &, und es gibt natürlich tausend Dinge zu beachten, siehe die oben verlinkte Spezifikation. Theoretisch gibt es auch ein PostCSS-Plugin, welches das Sass-Nesting versteht, aber das Ziel war ja theoretisch gültiges CSS zu schreiben.

Ich werde jetzt versuchen meine Privatprojekte Stück für Stück von Sass zu befreien. Lang lebe CSS!