Dynamische Stylesheets: Arbeiten mit CSS-Prä­prozess­oren

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.

Warum LESS "more" ist

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

Im Vergleich dazu: die LESS Syntax

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.

Hierzu bewegen wir uns im Terminal in den Ordner mit der LESS Datei screen.less. Der Befehl in [Fig. 5] speichert die Datei screen.css in demselben Ordner.

npm install less-watch-compile
...
node /path_to_your/node_modules/less-watch-compile --file screen.less -o
Fig. 5: Der Watch-Befehl mit Speichern unter dem gleichen Namen in demselben Ordner

Webpack.js

Solltest Du Dich mit Paket-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.

Mehr dazu 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 LESS 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
LESS Logo

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.

Mehr aus dem Blog

Navigation ein-/ausblenden