Calc CSS() - Moltiplicazione e divisione con valori unitari

Question

È possibile utilizzare calc() per moltiplicare o dividere con valori basati su unità (come 100%, 5px, ecc.).

Per esempio speravo di fare qualcosa di simile:

width: calc(100% * (.7 - 120px/100%)); 

Sperando che ha deliberato di qualcosa di simile (assumendo 100% = 500px):

width: calc(500px * (.7 - 120px/500px)); 
width: calc(500px * (.7 - .24)); 
width: calc(500px * .46); 
width: calc(230px); 

Tuttavia dopo alcuni esperimenti che sembra Non posso avere un valore basato su unità come denominatore per la divisione.

Inoltre, non riesco a collegare più due valori come 5px * 10px o 5px * 100%.

So che non ha senso nel 100% dei casi consentire questo, ma nel mio caso d'uso, mi piacerebbe sapere qual è la percentuale 120px della larghezza complessiva, che poi mi nutro di il resto dei miei calcoli.

O questo, o se qualcuno potesse immaginare un modo diverso di scriverlo, funzionerebbe altrettanto bene. Mi sono tormentato il cervello e non ho potuto inventare nulla.

Answer 1

Nella divisione CSS calc() - il lato destro deve essere un <number> pertanto i valori basati su unità non possono essere utilizzati in una divisione come questa.

Si noti inoltre che nella moltiplicazione almeno uno degli argomenti deve essere un numero.

Il MDN ha una grande documentazione su questo.

Se si desidera un metodo migliore per eseguire calcoli, è possibile utilizzare un preprocessore (mi piace Sass). Quel collegamento ti porterà alle loro guide (in quella pagina c'è una sezione sugli operatori).