Compilazione meno aggressiva con CSS3 calc

336

I compilatori Less che sto usando ( OrangeBits e dotless 1.3.0.5 ) traducono in modo aggressivo

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 attraverso la documentazione di Less e la documentazione di entrambi i compilatori e non sono riuscito a trovare nulla.

Il compilatore Less or Less supporta questo?

In caso contrario, esiste un extender CSS che lo fa?

— Nick Babcock
fonte

9

Sei sicuro di non voler un compilatore meno aggressivo?

— fiatjaf,

Sono anche sicuro che il compilatore sia più aggressivo! (la doppia negazione nel commento precedente mi ha confuso;)) (quindi anche il mio voto per la bella caratteristica qui sotto)

— Andreas Dietrich

530

Meno non è più valuta di espressione all'interno calcdi default dal v3.00.

Risposta originale ( Less v1.x...2.x):

Fai questo:

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

In Less 1.4.0 avremo strictMathsun'opzione che richiede che tutti i calcoli Less siano tra parentesi, quindi calcfunzionerà "out-of-the-box". Questa è un'opzione poiché rappresenta un grande cambiamento decisivo. I beta iniziali di 1.4.0 avevano questa opzione attivata per impostazione predefinita. La versione di rilascio è disattivata per impostazione predefinita.

— Luke Page
fonte

2

Nota che se stai compilando meno con la rientranza di Twitter, ignora questa fuga . Almeno al momento della stesura di questo commento.

— Attila Fulop,

1

Ho appena provato calc(100% - 50px)in less.css 1.4.0 e il risultato è stato calc(50%). Il ~"..."trucco fantastico continua a funzionare, ma sono confuso dall'affermazione "out-of-the-box", che mi fa pensare che quanto sopra funzionerebbe. Luke, come supporta il calccambiamento in Less 1.4.0? Grazie!

— Brian M. Hunt,

2

La domanda è: perché less.js ha tentato di calcolare questo in primo luogo? Dovrebbe generare un errore per "100% - 250 px" in quanto non è in grado di calcolare una risposta ragionevole.

— Aprire il

72

Per i lettori futuri, puoi anche sfuggire solo all'operatore, permettendoti di usare anche le variabili. Esempio:calc(@somePercent ~"-" @someLength)

— 0b10011

10

Invece di calcolare meno male o lanciare un errore, perché non può rendersi conto di ciò che l'utente sta cercando di fare e lasciarlo da solo? Ovviamente una percentuale e un valore in pixel non possono essere calcolati insieme in meno.

— dfmiller,

37

Un caso d'uso molto comune di calc è prendere la larghezza del 100% e aggiungere un margine attorno all'elemento.

Si può fare con:

@someMarginVariable = 15px;

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

— Sebastien Lorber
fonte

-o-calc- non è ancora supportato .

— un altro

28

Esistono diverse opzioni di escape 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); }

— icl7126
fonte

9

C'è un modo più ordinato per includere le variabili all'interno del calcolo di escape, come spiegato in questo post: la funzione calc () CSS3 non funziona con Less # 974

@variable: 2em;

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

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

— brohr
fonte