Како користити променљиве у ЦСС-у и поједноставити свој стил

by
Tweet
Share
Share
Pin

Većina veb lokacija koristi CSS za doterivanje svog izgleda i stilizovanje raznih komponenata veb stranica. CSS, ili kaskadni stilski list, tehnički nije programski jezik. Međutim, CSS se može upotrebljavati sa programskim jezicima kao što je JavaScript radi kreiranja prilagodljivih i interaktivnih veb stranica.

Ako ste koristili programske jezike, poput JavaScripta, znate da možete deklarisati promenljivu, dodeliti joj vrednost i ponovo je upotrebiti u različitim delovima koda. Dobra vest je da isti koncept možete primeniti i u CSS-u.

Ovaj članak će definisati CSS promenljive, opisati njihove prednosti i pokazati vam kako da deklarišete i koristite promenljivu u CSS-u.

Šta su promenljive u CSS-u?

CSS promenljive su prilagođena svojstva koja omogućavaju veb programerima da čuvaju vrednosti koje mogu ponovo da koriste kroz listu stilova. Na primer, možete deklarisati stil fonta, boju pozadine i veličinu fonta koje možete ponovo da upotrebljavate sa elementima kao što su naslovi, paragrafi i divovi u vašoj bazi koda.

Zašto upotrebljavati CSS promenljive? Ovo su neki od razloga:

  • Olakšava ažuriranje koda: Jednom kada deklarišete promenljivu, možete ponovo upotrebiti ceo spisak stilova bez ručnog ažuriranja svakog elementa.
  • Smanjuje ponavljanje: Kako vaša baza koda raste, videćete da imate slične klase i elemente. Umesto da pišete CSS kod za svaku stavku, možete jednostavno koristiti CSS promenljive.
  • Čini vaš kod lakšim za održavanje: Održavanje koda je važno ako želite da vaše poslovanje bude dugoročno.
  • Poboljšava čitljivost: Savremeni svet podstiče saradnju. Upotreba promenljivih u CSS-u rezultira kompaktnom kodnom bazom koja je čitljiva.
  • Lako održavati doslednost: CSS promenljive vam mogu pomoći da održite dosledan stil kako vaš izvorni kod raste ili se povećava veličina aplikacije. Na primer, možete da navedete margine, padding, stil fonta i boje koje će se koristiti u vašim dugmadima širom veb lokacije.

Kako deklarisati promenljive u CSS-u

Pošto znate šta su promenljive u CSS-u i zašto bi trebalo da ih upotrebljavate, možemo da nastavimo i ilustrujemo kako ih deklarisati.

Da biste deklarisali CSS promenljivu, počnite sa imenom elementa, a zatim napišite dve crtice (–), željeno ime i vrednost. Osnovna sintaksa je;

element {
    --variable-name: value;
}

Na primer, ako želite da primenite padding u celom dokumentu, možete ga proglasiti kao:

body {
    --padding: 1rem;
}

Opseg promenljivih u CSS-u

CSS promenljive mogu biti lokalne (dostupne unutar određenog elementa) ili globalne (dostupne u celom listu stilova).

Lokalne promenljive

Lokalne promenljive se dodaju određenim selektorima. Na primer, možete ih dodati dugmetu. Ovo je primer:

.button {
    --button-bg-color: #33ff4e;
}

Promenljiva boje pozadine dostupna je na selektoru dugmadi i njegovim potomcima.

Globalne promenljive

Jednom deklarisane, možete upotrebljavati globalne promenljive sa bilo kojim elementom u vašem kodu. Koristimo :root pseudo-klasu za deklarisanje globalnih promenljivih. Ovako ih proglašavamo:

:root {
    --primary-color: grey;
    --secondary-color: orange;
    --font-weight: 700:
}

U gornjem kodu možete koristiti bilo koju od promenljivih deklarisanih sa različitim elementima, kao što su naslovi, paragrafi, divovi ili čak celo telo.

Kako koristiti promenljive u CSS-u

Napravićemo projekat u svrhu demonstracije i dodati datoteke index.html i styles.css.

U datoteci index.html možemo imati jednostavan div sa dva naslova (h1 i h2) i paragrafom (p).

<div>
    <h1>Hello Front-end Dev!!!!</h1>
    <h2>This is how to use variables in CSS.</h2>
    <p> Keep scrolling</p>
</div>

U datoteci styles.css možemo imati sledeće:

:root {
    --primary-color: grey;
    --secondary-color: orange;
    --font-weight: 700:
    --font-size: 16px;
    --font-style: italic;
}
body {
    background-color: var(--primary-color);
    font-size: var(--font-size);
}
h1 {
    color: var(--secondary-color);
    font-style: var(--font-style)
}
h2 {
    font-weight: var(--font-weight)
}
p {
    font-size: calc(var(--font-size) * 1.2);
}

Kada se veb stranica prikaže, imaćemo sledeće:

Iz koda iznad, deklarisali smo globalne promenljive u elementu :root. Moramo da koristimo ključnu reč var da bismo koristili globalnu promenljivu u bilo kom od naših elemenata. Na primer, da bismo primenili boju pozadine koju smo deklarisali kao globalnu promenljivu, predstavljamo naš kod na sledeći način:

background-color: var(--primary-color);

Proverite sve ostale elemente i primetićete trend u primeni ključne reči var.

Koristite CSS promenljive sa JavaScript-om

Koristićemo lokalne i globalne promenljive da bismo ilustrovali kako da koristite CSS promenljive sa JavaScript-om.

Možemo dodati element upozorenja našem postojećem kodu:

<div class="alert">Klikni me!</div>

Naš novi index.html dokument će biti sledeći:

<div>
    <h1>Hello Front-end Dev!!!!</h1>
    <h2>This is how to use variables in CSS.</h2>
    <p> Keep scrolling</p>
</div>
<div class="alert">Click me!</div>

Možemo da stilizujemo našu promenljivu. Dodajte sledeći kod svom postojećem CSS kodu:

.alert {
    --bg-color: red; /* Define local variable */
    background-color: var(--bg-color); /* Use the local variable for the background color */
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: var(--font-weight); /*Use the global variable for font weight*/
    width: 50px;
}

Uradili smo sledeće:

  • Definisana lokalna promenljiva unutar elementa upozorenja:

--bg-color: red

  • Koristi ključnu reč var za pristup ovoj lokalnoj promenljivoj:

background-color: var(--bg-color);

  • Koristili smo globalnu promenljivu koju smo ranije deklarisali kao našu težinu fonta:

font-weight: var(--font-weight);

Dodajte JavaScript kod

Možemo učiniti da naš element upozorenja reaguje; kada kliknete na njega, dobićete iskačući prozor u vašem pretraživaču koji kaže: „Koristili smo CSS promenljive sa JavaScript-om!!!!“.

Možemo dodati JavaScript kod direktno u HTML kod tako što ćemo ga zatvoriti pomoću oznaka <script>. JavaScript kod treba da dođe posle HTML koda, ali pre zatvaranja oznake </body>.

Dodajte ovaj kod:

<script>
    const alertDiv = document.querySelector('.alert');
    alertDiv.addEventListener('click', function() {
        window.alert("We have used CSS Variables with JavaScript!!!!");
    });
</script>

Vaš HTML kod bi sada trebao izgledati otprilike ovako:

Naš JavaScript radi sledeće:

  • Koristimo document.querySelector() da lociramo element upozorenja.
  • Elementu upozorenja dodeljujemo promenljivu alertDiv.
  • U alertDiv-u koristimo metod addEventListener() da bismo dodali događaj „klik“.
  • Koristimo window.alert() da prikažemo poruku kada se dogodi klik.

Kada se stranica prikaže, imaćete sledeće:

Kada kliknete na upozorenje, dobićete sledeće:

Rezervne vrednosti u CSS promenljivim

Šta se dešava kada referencirate promenljivu koja nije definisana u vašoj tabeli stilova? CSS efekat koji nameravate da primenite neće biti primenjen. Rezervne vrednosti nude vrednost efekta koji će se pojaviti umesto nereferencirane promenljive.

Rezervne vrednosti su korisne na sledeće načine:

  • Ako određeni pregledači ne razumeju CSS promenljive, svojstvo select može imati na šta da se vrati.
  • Ako sumnjate da stranica ne radi kako se očekivalo zbog CSS promenljive, možete koristiti rezervnu vrednost da biste proverili da li je tačna.

Možete imati više od jednog rezervnog svojstva, odvojenog zarezima. Uzmite ovaj kod, na primer:

:root {
    --primary-color: #007bff;
}
.btn {
    background-color: var(--primary-color, red, yellow);
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

Ako pogrešno napišete reč primary-color kada koristite globalnu promenljivu, što znači da nije deklarisana, ona će izabrati crvenu, rezervnu vrednost.

Možemo to bolje demonstrirati sa ovim kodom:

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --primary-color: #007bff;
        }
        .btn {
            background-color: var(--primary-color, red);
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>


    <button class="btn">Click me!</button>

Ako ga prikažete u pretraživaču, dobićete ovo:

Međutim, možemo dobiti isti kod i promeniti samo jedan znak na selektoru dugmadi na sledeći način:

.btn {
    background-color: var(--primary-colr, red); /*I have misspelled primary-color to be primary-colr */
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

Pregledač će sada ovo prikazati:

Koristite dinamičku vrednost i promenljive izračunate vrednosti u CSS-u

Dinamičke vrednosti se automatski ažuriraju na osnovu određenih događaja ili uslova, kao što su unosi korisnika.

Proučite ovaj kod:

    <meta charset="UTF-8">
    <title>CSS Variables with JavaScript</title>
    <style>
        :root {
          --color: #333;
        }
        #color-input {
          margin-left: 1em;
        }
        #color-input {
          --color: var(--color-input);
        }
    </style>

    <label for="color-input">Choose a color:</label>
    <input type="color" id="color-input">

Gornji kod radi sledeće:

  • Promenljivu --color deklarišemo sa podrazumevanom vrednošću #333 koristeći selektor :root.
  • Koristimo #color-input za odabir ulaznog elementa.
  • Vrednost --color je podešena na var(--color-input), što znači da se boja uvek ažurira kada korisnik odabere novu boju koristeći birač boja.

Izračunate vrednosti vrše proračune na osnovu drugih svojstava ili promenljivih. Možemo to ilustrovati koristeći ovaj kod:

:root {
    --base-font-size: 14px;
    --header-font-size: calc(var(--base-font-size) * 3);
}
h2 {
    font-size: var(--header-font-size);
}

Iz ovog bloka koda možemo primetiti sledeće:

  • Imamo promenljivu --base-font-size koja definiše osnovnu veličinu fonta.
  • Imamo --header-font-size, što je 3 puta veće od vrednosti --base-font-size.
  • Imamo h1 selektor koji koristi var sa --header-font-size.
  • Dakle, sav h1 na veb stranici će biti tri puta veći od --base-font-size.

Okončanje

Sada razumete kako da koristite CSS promenljive da biste ubrzali proces razvoja i pisali kod koji je lako održavati. Možete da koristite prilagođene promenljive sa HTML-om i bibliotekama kao što je React. Pogledajte različite pristupe koje možete koristiti za stilizovanje React-a pomoću CSS-a.

Ovde možete proveriti izvorni kod.