Dynamische Stylesheets: Arbeiten mit CSS-Präprozessoren
Kategorie
Ein Tool, das beim Schreiben von Stylesheets nicht mehr wegzudenken ist – Präprozessoren wie SASS und LESS bieten Webdesignern die Möglichkeit, CSS in einer verschachtelten Struktur zu schreiben und mit Variablen zu arbeiten, um die sich sonst ständig wiederholenden Deklarationen zu vermeiden. Aber das ist längst nicht alles.
Die CSS Syntax
Um die Syntax und Ihre Vorteile zu erklären, schauen wir uns zunächst den "Normalfall" an, also wie ein Stylesheet regulär strukturiert ist.
Wenn eine verschachtelte HTML-Struktur innerhalb einer ID formatiert werden soll, so ist man gezwungen, die ID der Eltern-Elemente mit jeder Anweisung zu wiederholen. Ebenso werden Farben, Abstände und CSS-Animationen an Ort und Stelle deklariert [Fig. 1].
#main-navigation ul {
list-style-type: none;
padding: 1.5rem 0;
}
#main-navigation li {
display: inline-block;
margin-right: 1.5rem;
}
#main-navigation li a {
padding: 4px 10px;
color: #000;
-moz-transition: color 0.3s ease-out;
-ms-transition: color 0.3s ease-out;
-o-transition: color 0.3s ease-out;
-webkit-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
}
#main-navigation li a:focus,
#main-navigation li a:active,
#main-navigation li a:hover, {
color: #1e6df6;
}
Fig. 1: Einfaches CSS, wie es der Browser interpretieren kann am Beispiel einer Navigationshierarchie
Warum LESS "more" ist
Was sofort auffällt ist, dass der Code insgesamt deutlich schlanker ist [Fig. 2].
Mit dynamischem CSS (hier am Beispiel der LESS-Syntax) können wir nicht nur Deklarationen verschachteln, sondern auch wiederkehrende Anweisungen in Variablen speichern.
Aber: nicht falsch verstehen — nach dem Kompilieren sieht das CSS wieder so aus wie in [Fig. 1].
#main-navigation ul {
list-style-type: none;
padding: 1.5rem 0;
li {
display: inline-block;
margin-right: 1.5rem;
a {
padding: 4px 10px;
color: @dark;
.transition(color);
&:focus, &:active, &:hover {
color: @blue;
}
}
}
}
Fig. 2: Dasselbe CSS aber in deutlich angenehmerer Schreibweise für den Webdesigner.
Technische Integration
Die LESS Syntax muss natürlich in reguläres CSS konvertiert – kompiliert – werden.
Hierfür gibt es mehrere Möglichkeiten.
1. Desktop Tools
Es gibt eine ganze Reihe an Desktop-Tools zum Komplilieren von LESS und SASS Dateien.
Hier findest Du eine Auswahl an solchen:
10+ Best Tools and Resources to Compile & Manage SASS, LESS, and Stylus – CSS Preprocessors
2. Installation unter Node.js
Eine elegantere Art ist es, einen LESS Compiler als Node-Modul zu nutzen [Fig. 3]. Hier wird dann durch einen simplen Terminalbefehl in [Fig. 4] die .less Datei in reguläres CSS kompiliert.
Die Syntax lautet
lessc <input> <output>
Das Ergebnis ist eine CSS Datei.
npm install -g less
Fig. 3: Installation unter Node.js
lessc styles.less styles.css
Fig. 4: Kompilierung einer LESS-Datei in reguläres CSS
Der Watch-Befehl
Mit dem Node-Modul less-watch-compile, was zusätzlich installiert werden muss, wird die Kompilierung automatisch beim Speichern der LESS-Datei getriggert.
Wir installieren das Node Modul less-watch-compile auf App-Ebene. Der Befehl in [Fig. 5] richtet sich nach der Gegebenheit, dass wir uns im Unterordner mit der LESS-Datei befinden und wir die Zieldatei in den Unterordner "css" exportieren möchten.
Wir führen diesen Befehl im LESS-Ordner aus, um keine Pfadprobleme bei den @imports innerhalb der LESS Dateien zu bekommen.
npm install less-watch-compile
cd less
node ../node_modules/less-watch-compile --file styles.less -o ../css/styles.css
Watching styles.less
Detected change in '/Applications/XAMPP/xamppfiles/htdocs/my-app/less/screen.less'
Attemping to compile screen.less
Successfully compiled in 510ms
Fig. 5: Der Watch-Befehl mit automatisch ausgeführter Kompilierung nach File change
Webpack.js
Solltest Du Dich mit Package-Managern auskennen, so kann ich Dir Webpack ans Herz legen. Hier kannst Du Dein gesamtes Projekt – sowohl all Dein CSS sowie dein Javscript in eine einzige CSS-/JS Datei bündeln.
Anhand des Beispiels in Fig. 6 geschieht das Kompilieren hier global automatisch beim Speichern einer beliebigen JS- oder SASS-Datei.
Ich weiß, das schaut zunächst recht komplex aus, aber sobald das einmal richtig konfiguriert ist und alle Abhängigkeiten installiert sind, ist das super komfortabel. Besonders angenehm ist halt, dass auch das gesamte Javascript in einer (hier) app.js minimiert ist.
Da reicht dann einfach der Befehl npm run watch — und alles läuft von allein.
Ich arbeite seit einiger Zeit nur noch mit diesem Package Manager.
Die Dokumentation findest Du unter https://webpack.js.org/
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
module.exports = {
entry: {
app: "./src/js/app.js",
style: "./src/scss/style.scss",
},
output: {
path: path.resolve(__dirname, 'js'),
filename: "[name].js"
},
plugins: [
new FixStyleOnlyEntriesPlugin(),
new MiniCssExtractPlugin({
filename: "../css/[name].css",
chunkFilename: "../css/[id].css",
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: "babel-loader?cacheDirectory=true"
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
],
},
],
},
resolve: {
extensions: [".js", ".scss"],
modules: ["node_modules"],
alias: {
request$: "xhr"
}
},
mode: 'production',
};
Fig. 6: Beispiel einer Webpack Konfigurationsdatei für das automatische Bündeln von SASS-Dateien und JS Modulen in jeweils nur eine minimierte Datei.
3. Client-seitige Kompilierung
Den LESS Compiler gibt es auch als JS Script zur clientseitigen Ausführung. Diese Methode nenne ich bewusst als Letzte, da ich mich nicht an den Gedanken gewöhnen kann, die korrekte Darstellung der Seite von Javascript abhängig zu machen.
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdn.jsdelivr.net/npm/less@3.13" ></script>
Fig. 7: Client-seitige Kompilierung zur Laufzeit im Browser
Wohin geht die Reise?
Sobald Deine Entwicklungsumgebung steht, kannst Du mit LESS globale Variablen einsetzen wie Farb-, Schrift-, aber auch komplexe Formatdefinitionen.
Eine komplette Dokumentation über die Features findest Du hier.
Gib mir Deinen Senf dazu
Kommentare sind für diesen Eintrag derzeit nicht aktiviert.
Kommentare zu diesem Beitrag