Nello script #86 abbiamo visto come gestire le proprietà calcolate utilizzando LESS. Questo va bene in scenari dove la dimensione è comunque prefissata, mentre spesso, per ragioni di layout, è necessario procedere con un calcolo che dipenda da un valore che si conosce solo a runtime.

Prima di CSS3, questa funzionalità era possibile solo attraverso l'uso di JavaScript. Oggi, invece, è possibile utilizzare lo statement calc, come in questo esempio:

#container {
  height: calc(100% - 20px);
}

L'effetto di questo codice sarà quello di calcolare la dimensione dell'altezza in maniera relativa, togliendo 20px al 100%.

Questa espressione può essere utilizzata quando il tipo di proprietà è una lunghezza, frequenza, angolo, durata, numero o intero, con i classici operatori di addizione, sottrazione, divisione e moltiplicazione. E' consigliabile separare l'operatore da due spazi, uno prima e l'altro dopo l'operatore stesso.
C'è pieno supporto per questa funzionalità a partire da IE9+, FireFox 26+, Chrome 31+, Safari 7+, Opera 19+.

Per approfondimenti:

Specifiche del W3C
http://dev.w3.org/csswg/css-values/#calc-notation

#85 - Gestione di proprietà calcolate nei CSS con LESS
https://www.html5italia.com/script/86/Gestione-Proprieta-Calcolate-CSS-LESS.aspx