Insieme alla direttiva property trattata nel precedente script, troviamo un ulteriore aiuto nella stesura delle posizioni e nell'ultilizzo dello spazio nel CSS. Le stepped value function sono funzioni, come round(), mod(), rem(), che permettono di eseguire calcoli all'interno del CSS.

Diversamente da un pre-compilatore CSS, che calcola il valore a compile time, inserendo poi un numero statico, e dal JavaScript che inietta codice statico, queste funzioni permettono di mantenere una dinamicità di risultati anche all'interno del browser.

.element {
  /* arrotonda al valore più vicino di 10px */
  /* 33px =>30px */
  /* 37px => 40px */
  width: round(nearest, var(--dynamic-width), 10px);
}

La funzione round() permette di arrotondare il valore di una variabile CSS --dynamic-width al multiplo più vicino di 10px. Questo è particolarmente utile quando si lavora con layout fluidi o responsive, dove i valori possono variare in base alle dimensioni della finestra del browser o ad altre condizioni dinamiche, come ad esempio griglie o altezze dei font.

Oltre a nearest possiamo utilizzare anche up e down per arrotondare rispettivamente al multiplo superiore o inferiore o anche to-zero per arrotondare verso lo zero, utile nel caso di valori negativi.

Le funzioni mod() e rem() restituiscono il resto o la parte intera di una divisione, permettendo la creazione di pattern ripetitivi o la gestione di layout complessi.

[code lang="css"]/* Modifica lo stile di ogni terzo elemento */
.item:nth-child(n) {
--remainder: mod(n, 3);
background-color: hsl(calc(var(--remainder) * 120), 70%, 80%);
}[/css]