Skapa variabler i CSS

Om man inte vill använda SASS eller LESS går det numera bra att skapa variabler (kallas även ”custom properties”) i CSS. Det är en stor fördel att spara t ex alla färger i ditt projekt i variabler. Det blir annars ganska lätt rörigt och svårt att organisera.

Exempelkod:

<!DOCTYPE html>
<html>
<head>
<style>
:root {
--main-bg-color: beige;
--main-txt-color: red;
--main-padding: 10px;
}

#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}

</style>
</head>
<body>

<h1>The var() Function</h1>

<div id="div1">Exempeltext, exempeltext, exempeltext...</div>
<br>

</html>

Här finns utförliga instruktioner om hur man använder CSS-variabler.