CSS varijable

19. decembar 2019.

CSS varijable su već neko vreme tu i popunile su prazninu koju su ranije popunjavali preprocesori SASS i LESS. Sigurno je lakše u nekoj promeni kolorita sajta nekim povodom lakše izmeniti par vrednosti, a ne na css fajlu koji ima par hiljada linija koda ići redom i to sređivati. Iako postoji opcija Find i Replace, korišćenje varijabli je daleko napredniji pristup i ako već postoji treba ga koristiti.

Pomenuti CSS preprocesori svakako imaju mnogo više funckija, ovaj dodatak CSS-u je svakako odličan momenat, a i sami znamo da se stvari jako brzo menjaju, svaki dan izlaze novi toolovi i raznorazni dodaci, koji ubrzavaju i olakšavaju razvoj veb sajtova i aplikacija. I drago mi je da smo dočekali da u nativnom smislu imamo varijable u CSS-u. Veoma važna stavka je čitljivost koda, kao i mogućnost lake zamene vrednosti na valkim css fajlovima, ne morate da ispravljate stotine ili hiljade linija koda, menjate samo vrednost varijable.

Nekada smo na vrhu CSS fajla ubacivali kao komentar boje pa kopirali. No nećemo više tako.

/*
#e88658  rgb(232, 134, 88)  orange
#9cb344  rgb(156, 179, 68)  zelena
#00aae8  rgb(0, 170, 232)  plava
*/

Jednostavan primer korišćenja varijabli u CSS-u

1. Prvo moramo da kreiramo globalnu varijablu
:root()

2.Zatim da je definišemo

:root { –boja-pozadine: lightgray;}

3.I na kraju je iskoristimo
background-color: var(–pozadinska-boja);

Kao što se vidi iz primera, posle kreiranja i definisanja globalne varijabe, tako što smo ispred imena varijable dodali dve kose crte(–) koje smo sami definisali, što znači da to nije ključna reč jezika za razliku od varijable :root. Posle toga smo zadali vrednost kao i obično što to činimo u css-u. I posle svega smo iskoristili varijablu u stilizaciji dalje u kodu, tako što smo elementu koji stilizujemo dodali ključnu reč var i između zagrada dodali dve kose crte i ime varijable koju smo prethodno definisali. Ovo je jednostavan primer ali sasvim dovoljan da razumemo samo upotrebu varijabli.

U ovom konkretnom primeru smo iskoristili varijablu –pozadinska-boja za pozadinu cele stranice, zatim smo pozadinu elementa blockquote koji se ponavlja 3 puta takođe stilizovali pomoću varijable –blockquote, span elemenat takođe pomoći varijable –span, kao i naslove pomožu varijable –naslovi i na kraju smo veličinu fonta namestili pomoću varijable –velicina-fonta.