Zmienne w stylach CSS pozwalają nam wykorzystać np. dany kolor w wielu obiektach. Dzięki takiemu podejściu będziemy mogli w przyszłości łatwo zmieniać całą kolorystykę strony, zmieniając daną wartość tylko w jednym miejscu. Zmienne tworzymy na samym początku,np:
:root{
--theme-color1:#44aaaa;
--theme-color2:#474747;
}Zmiennych używamy w następujący sposób, np:
.pi-footer-text{
text-align: center;
color:var(--theme-color1);
}Innym rozwiązaniem, poza zmiennymi może być utworzenie osobnej klasy, np: theme-color-1 w której zawrzemy właściwość odnoszącą się do koloru, np:
.theme-color-1{
color:#d45f0b;
}Później przy każdym elemencie na stronie wystarczy dodać klasę theme-color-1, by ustawić kolor motywu. Po zmianie wartości koloru w pliku CSS, wszystkie elementy posiadające tę klasę również się zaktualizują.