dexblog.ro
CSS Toate proprietățile CSS

Variabile CSS (Custom Properties: var(–nume)) în CSS

Selectori și reguli de bază CSS3+

Stochează valori refolosibile (culori, spațieri, fonturi) care pot fi actualizate într-un singur loc pe tot site-ul.

Sintaxă CSS 
:root {
  --culoare-principala: #2563eb;
  --spatiere: 16px;
}

.card {
  background: var(--culoare-principala);
  padding: var(--spatiere);
}

Ce face Variabile CSS (Custom Properties: var(--nume))

Variabilele CSS (numite oficial CSS Custom Properties) încep întotdeauna cu două cratime (--nume) și sunt citite cu funcția var(--nume, valoare-rezerva).

Definite pe selectorul rădăcină :root, ele sunt disponibile la nivelul întregului document. Sunt esențiale pentru implementarea modului întunecat (Dark Mode), teme de culori dinamice și menținerea unui design system coerent.

Valori uzuale

Valoare Descriere
--nume Declarația variabilei (ex. –text: #1e293b).
var(--nume) Citește valoarea variabilei definite.
var(--nume, fallback) Citește valoarea, folosind rezerva dacă variabila nu există.

Exemple

Exemplul 1: Sistem de temă deschisă / închisă cu variabile CSS

Schimbarea variabilelor în clasa .dark actualizează instantaneu întreaga interfață.

:root {
  --bg: #ffffff;
  --text: #0f172a;
  --accent: #2563eb;
}

body.dark {
  --bg: #0f172a;
  --text: #f8fafc;
  --accent: #60a5fa;
}

body {
  background-color: var(--bg);
  color: var(--text);
}

Efect vizual în browser

Pe fundal alb textul este negru; când se activează clasa .dark, fundalul devine bleumarin-închis și textul alb.

Greșeli frecvente

  • Scrierea numelui variabilei fără cele două cratime de start (culoare-principala în loc de –culoare-principala).
  • Folosirea variabilelor în interiorul valorilor @media fără suport specific (variabilele CSS nu sunt expandate în regulile @media (min-width: var(–breakpoint))).

Comenzi înrudite