Variabilele în CSS
Stilizarea cu ajutorul variabilelor
Ca și în limbajele de programare, în CSS putem defini variabile. Variabilele în CSS pot stoca valori standard care pot fi atribuite proprietăților obișnuite CSS, cum ar fi culoarea de fundal, culoarea textului, înălțimea textului, lățimea și înălțimea elementelor etc. Acestea pot fi apoi utilizate de mai multe ori în diverse părți ale definițiilor de stiluri.
Deși termenul "variabile" (css variables) este adesea utilizat, oficial ele se numesc "custom properties" (proprietăți personalizate).
Definirea variabilelor CSS trebuie să înceapă cu prefixul --, de exemplu, --my-color. Ele pot fi definite pentru orice element. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Variabile în CSS3</title>
<style>
div {
--text-color: #ff4757;
--text-size: 20px;
height: 40px;
font-family: Verdana;
}
#div1 {
font-size: var(--text-size);
}
#div2 {
color: var(--text-color);
}
#p1 {
color: var(--text-color);
font-size: var(--text-size);
}
</style>
</head>
<body>
<div id="div1">Primul bloc.</div>
<div id="div2">Al doilea bloc.</div>
<div><p id="p1">Al treilea bloc.</p></div>
</body>
</html>Aici, în codul CSS pentru elementul div, sunt definite două variabile: --text-color și --text-size.
--text-color: #ff4757;
--text-size: 20px;Folosind expresia var(), putem face referire la aceste variabile în orice parte a codului CSS:
#p1 {
color: var(--text-color);
font-size: var(--text-size);
}Astfel, primul bloc va primi înălțimea textului din --text-size, al doilea bloc va primi culoarea textului din --text-color, iar al treilea bloc va primi ambele componente.
Dacă trebuie să schimbăm culoarea textului, este suficient să schimbăm valoarea variabilei.
Aceste variabile pot fi definite pentru orice element. Ele sunt moștenite de elementele fiică. Astfel, în exemplul de mai sus, vedem că elementul paragrafului imbricat primește stilurile de la div-ul părinte.
Dar dacă paragraful ar fi în afara blocului div:
<div id="div1">Primul bloc.</div>
<div id="div2">Al doilea bloc.</div>
<p id="p1">Al treilea bloc.</p>Atunci valorile variabilelor nu s-ar aplica:
Dacă dorim ca variabilele să fie utilizate global pentru toate elementele, le definim pentru elementul :root.
:root {
--text-color: #ff4757;
--text-size: 20px;
}Valori de rezervă
La definirea variabilelor pot apărea erori, de exemplu, variabila nu este definită (nu este definită deloc sau numele ei conține o greșeală de tipar). În acest caz, putem specifica valori de rezervă care vor fi utilizate în cazul în care valoarea variabilei este incorectă.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Variabile în CSS3</title>
<style>
:root {
--tex-color: #ff4757;
--text-size: 20px;
--reserved-color: #5352ed;
}
div {
height: 35px;
font-family: Verdana;
}
#div1 {
color: var(--text-color, var(--reserved-color));
}
#div2 {
color: var(--text-color, var(--reserved-color, red));
}
#div3 {
color: var(--text-color, #2ed573);
}
</style>
</head>
<body>
<div id="div1">Primul bloc.</div>
<div id="div2">Al doilea bloc.</div>
<div id="div3">Al treilea bloc.</div>
</body>
</html>Al doilea parametru în funcția var() permite setarea unei valori de rezervă. Aceasta poate fi o valoare exactă sau valoarea unei alte variabile:
color: var(--text-color, var(--reserved-color));Pentru a doua variabilă, putem de asemenea defini o valoare de rezervă dacă este incorectă:
color: var(--text-color, var(--reserved-color, red));