Einleitung
Für meine Webseiten verwende ich einen auf NodeJS basierenden static-site-generator. Bisher habe ich einfach SCSS/SASS eingesetzt, weil es leicht war Bootstrap 4 direkt mittels SCSS zu benutzen. Jedoch kam es immer wieder im CI-Server und auf anderen Workstations zu Problemen beim ‘npm install’ der Pakete. Das Paket ‘node-scss’ benötigt eine native ‘libsass’ Bibliothek die während des Installierens der NPM Pakete kompiliert werden muss.
Ich zeige wie man für Bootstrap 4 von SCSS auf postcss migriert und Responsive Font Size einsetzt.
SCSS zu postcss
Es gibt leider keinen postcss build von Bootstrap, daher muss man darauf verzichten die Bootstrap SCSS Variablen zu überschreiben. Bspw. gibt es ja bei der SCSS Variante globale fontSize Variablen oder Variablen für die PrimaryColor. Ich nehme das aber in Kauf, da ich Bootstrap primär einsetze für responsive Grid, Tooltips, Collapse usw.
Buttons und sonstige ‘sichtbare’ UI Elemente style ich sowieso selbst. Oder ich überschreibe die Bootstrap Styles mit eigenen Klassen. Daher ist es nur wichtig die selbstverwendeten SCSS Befehle zu migrieren.
Hier eine kurze Aufstellung der SCSS Funktionen, die ich eingesetzt und für die ich postcss Alternativen gebraucht habe.
SCSS: darken(#fff, 20%)
- Mittels darken() lässt sich eine Farbe um x Prozent verdunkeln.
- Bei postcss wird das postcss-color-function Plugin benötigt und dann lässt sich schreiben:
github:834e4b2a53138d8f62018122a48a8c67
SCSS: lighten(#000, 20%)
- Mittels lighten() lässt sich eine Farbe um x Prozent aufhellen.
- Bei postcss wird das postcss-color-function Plugin benötigt und dann lässt sich schreiben:
github:2e8b5c087a941a6f7db14d39fc9ca948
SCSS: Include
- In SCSS lassen sich einfach verschiedene Dateien zusammenfügen.
- Bei postcss wird das postcss-import Plugin benötigt und dann lässt sich schreiben:
github:447c46966f63cd419805e68316544dc5
- ACHTUNG: Die ‘@import’ Statements müssen immer ganz oben in der Datei stehen!
SCSS: Variablen
- In SCSS lassen sich Variablen mit Default-Werten definieren und bei Bedarf überschreiben. So lässt sich bspw. eine Komponente erstellen, die einen blauen Hintergrund hat und sich mittels Variable auf rot setzen lässt.
- Bei postcss wird das postcss-css-variables Plugin benötigt. Aufgrund der Einschränkungen des import Plugins müssen wir das Ganze aber wie folgt aufbauen:
github:1d5a64014efa5a1c16fd297874be258a
github:8743a5a24c6924bb4b10ce9ba8e6f58c
github:f02270a7af7e283809410d300fefc8cc
postcss build
Gefühlt stehen ja alle auf Webpack. Ich bau meinen eigenen Krempel lieber selbst, da webpack ‘fsevents’ ins Projekt holt, was wieder c++ bindings hat. Für einen c++ freien und 100% bio NodeJS build brauchen wir nicht viel.
shell:npm install bootstrap cssnano postcss-color-function postcss-css-variables postcss-import postcss-preset-env
Nun können wir uns ein simples build-file bauen:
github:15efef4340b2085bb055d4ea3d183c99
Und wenn unsere main.css in ‘./src/’ liegt dann können wir den postcss build nun ausführen.
shell:node build-css.js
Wenn alles gut geht, gibt es nun ein minifiziertes Bundle ‘main.bundle.css’. Wenn man Syntax Fehler macht, dann sieht die Ausgabe wie folgt aus:
Responsive Font Size mit postcss
Lange habe ich mich dagegen gewehrt, fand es irgendwie doof, dass sich die Schriftgröße ändert, wenn der Screen kleiner wird. Es gab Projekte da wurde das auf die Spitze getrieben mit tausenden Media Queries, um auch Buttons und Paddings entsprechend zu setzen. Das muss jeder selber wissen.
Da ich es aber doof finde Media Queries selber zu schreiben, lässt sich mit postcss einfach die Responsive Font Size Bibliothek nutzen.
Da wir ja schon unser build-file haben, installieren wir einfach die Bibliothek:
shell:npm install rfs
Nun fügen wir das postcss Plugin hinzu und übernehmen einfach default Werte:
github:b8919792bb0f4cbfcb3f04d39faa1654
Und nun können wir anstatt ‘font-size’ einfach ‘responsive-font-size’ schreiben und es werden für uns Media Queries erzeugt.
github:6e1a832b165abe9cd62b801d89d0c5b8
Wenn wir nun den Build ausführen:
shell:node build-css.js
Dann erhalten wir:
github:b6daf2543a9fad762c7001e1483c24ee
Die Einstellungen der RFS muss jeder für sich selbst austüffteln, diese sind sehr gut im RFS GitHub Repo dokumentiert (ganz unten).
Wenn wir uns nun ein HTML file basteln und das CSS auf einen span anwenden, dann sieht das wie folgt aus:
Fazit
Die Jenkins builds laufen endlich fehlerfrei durch. Weniger c++ kompilieren bedeutet auch weniger CPU Nutzung und somit Strom Ersparnis …. Ich finde postcss auf jedenfall deutlich angenehmer als SCSS und man kann sich theoretisch auch eigene postcss Plugins schreiben für bspw. responsive-padding oder Ähnliches. Gerade weil meine Projekte meist sowieso auf NodeJS/JavaScript basieren ist die pure JavaScript build-chain nun sehr angenehm. Mit Bootstrap 5 soll das RFS voll ausgerollt werden und natürlich lässt es sich auch mit SCSS und anderen Tools nutzen.