Majoritatea site-urilor web folosesc CSS pentru a-și șlefui aspectul și pentru a stila diferite componente ale paginii web. CSS, sau Cascading Style Sheet, nu este din punct de vedere tehnic un limbaj de programare. Cu toate acestea, CSS poate fi folosit cu limbaje de programare precum JavaScript pentru a crea pagini web receptive și interactive.
Dacă ați folosit limbaje de programare, cum ar fi JavaScript, știți că puteți declara o variabilă, îi puteți atribui o valoare și o puteți reutiliza în diferite părți ale codului dvs. Vestea bună este că puteți aplica același concept în CSS.
Acest articol va defini variabilele CSS, va descrie beneficiile acestora și vă va arăta cum să declarați și să utilizați o variabilă în CSS.
Cuprins
Ce sunt variabilele în CSS?
Variabilele CSS sunt proprietăți personalizate care permit dezvoltatorilor web să stocheze valori pe care le pot reutiliza prin foaia de stil. De exemplu, puteți declara stilul fontului, culoarea de fundal și dimensiunea fontului pe care le puteți reutiliza cu elemente precum titluri, paragrafe și div-uri din baza de cod.
De ce să folosiți variabile CSS? Acestea sunt câteva dintre motive;
- Ușurează actualizarea codului: odată ce declarați o variabilă, puteți reutiliza întreaga foaie de stil fără a actualiza manual fiecare element.
- Reduce repetiția: pe măsură ce baza de cod crește, veți descoperi că aveți clase și elemente similare. În loc să scrieți cod CSS pentru fiecare articol, puteți utiliza pur și simplu variabile CSS.
- Vă face codul mai ușor de întreținut: întreținerea codului este importantă dacă doriți ca afacerea dvs. să fie o afacere în funcțiune.
- Îmbunătățește lizibilitatea: lumea modernă încurajează colaborarea. Folosirea variabilelor în CSS are ca rezultat o bază de cod compactă care poate fi citită.
- Consecvența ușor de menținut: variabilele CSS vă pot ajuta să mențineți un stil consecvent pe măsură ce codul sursă crește sau dimensiunea aplicației crește. De exemplu, puteți declara marginile, umplutura, stilul fontului și culorile care urmează să fie utilizate în butoanele dvs. de pe site.
Cum să declarați variabile în CSS
Deoarece știți să înțelegeți ce sunt variabilele în CSS și de ce ar trebui să le utilizați, putem merge mai departe și ilustrăm cum să le declarăm.
Pentru a declara o variabilă CSS, începeți cu numele elementului, apoi scrieți două liniuțe (–), numele și valoarea dorite. Sintaxa de bază este;
element {
--variable-name: value;
}
De exemplu, dacă doriți să aplicați padding în întregul document, îl puteți declara ca;
body {
--padding: 1rem;
}
Domeniul de aplicare al variabilelor în CSS
Variabilele CSS pot fi definite local (accesibile într-un anumit element) sau global (accesibile în întreaga foaie de stil).
Variabile locale
Variabilele locale sunt adăugate selectoarelor specifice. De exemplu, le puteți adăuga la un buton. Acesta este un exemplu;
.button {
--button-bg-color: #33ff4e;
}
Variabila de culoare de fundal este disponibilă pe selectorul de butoane și pe copiii acestuia.
Variabile globale
Odată declarat, puteți utiliza variabile globale cu orice element din codul dvs. Folosim pseudoclasa :root pentru a declara variabilele globale. Așa le declarăm;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
}
În codul de mai sus, puteți utiliza oricare dintre variabilele declarate cu elemente diferite, cum ar fi titluri, paragrafe, div-uri sau chiar întregul corp.
Cum se utilizează variabilele în CSS
Vom crea un proiect în scopuri demonstrative și vom adăuga fișiere index.html și styles.css.
În fișierul index.html, putem avea un div simplu cu două titluri ( h1 și h2) și un paragraf (p).
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
În fișierul style.css, putem avea următoarele;
: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);
}
Când pagina web este redată, vom avea următoarele;
Din codul de mai sus, am declarat variabile globale în elementul :root. Trebuie să folosim cuvântul cheie var pentru a folosi variabila globală în oricare dintre elementele noastre. De exemplu, pentru a aplica culoarea de fundal pe care am declarat-o ca variabilă globală, prezentăm codul nostru după cum urmează;
culoare de fundal: var(–culoare-primară);
Verificați toate celelalte elemente și veți observa o tendință în modul în care este aplicat cuvântul cheie var.
Utilizați variabile CSS cu JavaScript
Vom folosi variabile locale și globale pentru a ilustra modul de utilizare a variabilelor CSS cu JavaScript.
Putem adăuga un element de alertă la codul nostru existent;
Noul nostru document index.html va fi după cum urmează;
<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>
Ne putem stila variabila. Adăugați următorul cod la codul dvs. CSS existent;
.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;
}
Am făcut următoarele;
- A definit o variabilă locală în interiorul elementului de alertă;
– culoarea bg: roșu
- A folosit cuvântul cheie var pentru a accesa această variabilă locală;
culoare de fundal: var(–bg-color);
- Am folosit variabila globală pe care am declarat-o mai devreme drept greutatea fontului;
greutatea fontului: var(–greutatea fontului);
Adăugați cod JavaScript
Putem face ca elementul nostru de alertă să răspundă; când faceți clic pe el, veți primi o fereastră pop-up în browser care spune; „Am folosit variabile CSS cu JavaScript!!!!”.
Putem adăuga cod JavaScript direct la codul HTML prin includerea acestuia folosind etichetele . Codul JavaScript ar trebui să apară după codul HTML, dar înainte de a închide eticheta
