Compilation meno aggressivo con CSS3 calc

Question

meno compilatori che sto usando (OrangeBits e dotless 1.3.0.5) sono aggressivamente traducendo

body { width: calc(100% - 250px - 1.5em); } 

in

body { width: calc(-151.5%); } 

che ovviamente non è desiderato. Mi chiedo se c'è un modo per segnalare al compilatore Less di ignorare essenzialmente l'attributo durante la compilazione. Ho cercato nella documentazione Less e nella documentazione di entrambi i compilatori e non ho trovato nulla.

Meno o meno un compilatore supporta questo?

In caso contrario, esiste un extender CSS che funziona?

Answer 1

fare questo ..

body { width: calc(~"100% - 250px - 1.5em"); } 

In less.js 1.4.0 avremo un'opzione strictMaths che impone a tutti i calcoli meno di essere tra parentesi, in modo che il calc lavoreremo "out-of-the- scatola". Questa è un'opzione in quanto è un importante cambiamento di rottura. Le beta precedenti di 1.4.0 avevano questa opzione attivata per impostazione predefinita. La versione di rilascio è disattivata per impostazione predefinita.

Answer 2

Un utilizzo molto comune di calc è pari al 100% della larghezza e aggiunge un margine attorno all'elemento.

Uno può farlo con:

@someMarginVariable = 15px; 

margin: @someMarginVariable; 
width: calc(~"100% - "@someMarginVariable*2); 
width: -moz-calc(~"100% - "@someMarginVariable*2); 
width: -webkit-calc(~"100% - "@someMarginVariable*2); 

Answer 3

Ci sono diversi opzioni di fuga con lo stesso risultato:

body { width: ~"calc(100% - 250px - 1.5em)"; } 
body { width: calc(~"100% - 250px - 1.5em"); } 
body { width: calc(100% ~"-" 250px ~"-" 1.5em); } 

Answer 4

So che questo è vecchio, ma c'è un modo più ordinato per includere variabili all'interno del sfuggito calc, come spiegato in questo post: https://github.com/less/less.js/issues/974

@variable: 2em; 

body{ width: calc(~"100% - @{variable} * 2");} 

utilizzando le parentesi graffe non è necessario chiudere e riaprire le virgolette di escape.