CSS Variablen

CSS Variablen

Der Begriff «Variable» ruft bei vielen Designern und MMP Studierenden ein Stirnrunzeln hervor. Variablen gehören in die Welt der Programmierung und nicht zum Thema Design. Diese Zeiten sind vorbei! Auf Caniuse erkennt man, dass die modernen Browser die CSS Variablen unterstützen. Es ist nicht mehr nötig, dafür LESS oder SASS (resp. SCSS) zu verwenden:

Beispiel zur Illustration

Bei der Gestaltung eines Corporate Designs werden zum Beispiel immer wieder die gleichen Schrift- oder Hintergrundfarben verwendet. Statt mehrfachen Definitionen lassen sich Variablen verwenden. Diese werden in der :root Pseudo-Klasse mit zwei Bindestrichen und einem Namen definiert:

Das Ergebnis im Browser sieht gleich aus wie bei der klassischen Definition:

Weiterführender Link

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.