CSS-Variablen anstatt von LESS oder SASS

Viele Browser können heute schon mit Variablen in CSS umgehen, welche Anpassungen oder Änderungen an Styesheets wesentlich vereinfachen. Während für große und komplexe Layouts immer noch Pre-Prozessoren, wie LESS oder SASS sinnvoll sind, so können für kleinere Projekte CSS-Variablen bereits eine große Hilfe sein. Alle aktuellen Browser unterstützen diese schon geraume Zeit und für veraltete Browser, wie den Internet Explorer, kann leicht ein Fallback definiert werden.

:root {
  	--red: #9e0529;
  	--grey: #cdcdcd;
}
ul li:nth-of-type(odd) {
  	background-color: var(--red);
}
ul li:nth-of-type(even) {
 	background-color: var(--grey);
}

• The quick brown fox jumps over the lazy dog
• The quick brown fox jumps over the lazy dog
• The quick brown fox jumps over the lazy dog
• The quick brown fox jumps over the lazy dog

Obschon der größere Teil der Browser derartige Variablen verarbeiten kann, sollte für die inkompatiblen Browser ein Fallback definiert werden. Hierfür wird die CSS-Eigenschaft zunächst ohne eine Variable definiert und danach von den kompatiblen Browsern mit der Variable überschrieben.

:root {
  	--red: #9e0529;
  	--grey: #cdcdcd;
}
ul li:nth-of-type(odd) {
  	background-color: #fff;
	background-color: var(--red);
}