`calc()` în CSS

Funcții și unități CSS CSS3+ (Chrome 26, Firefox 16, Safari 7)

Face calcule direct în CSS și poate combina unități diferite, de exemplu procente minus pixeli sau o variabilă înmulțită cu un număr.

Sintaxă CSS

width: calc(100% - 2rem);
height: calc(100vh - 64px);
margin-top: calc(var(--spatiu) * 2);
font-size: calc(1rem + 0.5vw);

Ce face `calc()`

calc() acceptă adunare (+), scădere (-), înmulțire (*) și împărțire (/) și poate fi folosit oriunde se așteaptă o lungime, un procent, un unghi, o durată sau un număr.

Puterea lui stă în combinarea unităților pe care browserul le cunoaște abia la afișare: calc(100% - 300px) înseamnă „tot spațiul disponibil minus lățimea barei laterale”, indiferent de mărimea ecranului.

Funcția se folosește foarte des împreună cu variabilele CSS (calc(var(--baza) * 1.5)) și poate fi imbricată: calc(100% - calc(2 * 16px)), unde al doilea calc poate fi scris și doar ca paranteză.

Valori uzuale

Valoare	Descriere
`a + b / a - b`	Adunare și scădere; operatorii trebuie înconjurați de spații.
`a * n`	Înmulțire; cel puțin unul dintre termeni trebuie să fie un număr fără unitate.
`a / n`	Împărțire; împărțitorul trebuie să fie un număr fără unitate în majoritatea cazurilor.
`( ... )`	Parantezele grupează operațiile, la fel ca în matematică.

Exemple

Exemplul 1: Conținut lângă o bară laterală de lățime fixă

Coloana principală ocupă tot ce rămâne după bara laterală de 280px și spațiul dintre ele.

.bara-laterala {
  float: left;
  width: 280px;
}

.continut-principal {
  float: right;
  width: calc(100% - 280px - 2rem);
}

Efect vizual în browser

Pe un ecran de 1200px, bara cu categoriile magazinului are 280px, iar lista de produse are 888px (1200 - 280 - 32). Dacă fereastra se micșorează la 1000px, lista se reduce automat la 688px.

Exemplul 2: Spațieri derivate dintr-o singură variabilă

Toate distanțele sunt multipli ai aceleiași valori, deci scara rămâne coerentă când schimbi variabila.

:root {
  --spatiu: 8px;
}

.card-pret {
  padding: calc(var(--spatiu) * 2);
  margin-bottom: calc(var(--spatiu) * 3);
  gap: var(--spatiu);
}

.card-pret .eticheta {
  top: calc(var(--spatiu) * -1.5);
}