Compilation moins agressive avec CSS3 calc

336

Les compilateurs Less que j'utilise ( OrangeBits et dotless 1.3.0.5 ) traduisent agressivement

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

dans

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

Ce qui n'est évidemment pas souhaité. Je me demande s'il existe un moyen de signaler au compilateur Less d'ignorer essentiellement l'attribut pendant la compilation. J'ai parcouru la documentation de Less et la documentation des deux compilateurs, et je n'ai rien trouvé.

Est-ce que le compilateur Less ou Less prend en charge cela?

Sinon, existe-t-il un extenseur CSS qui le fait?

css compilation less css-calc Nick Babcock
la source
9
Êtes-vous sûr de ne pas vouloir un compilateur moins agressif?
fiatjaf
Je suis très sûr aussi de vouloir que le compilateur soit plus agressif! (la double négation dans le commentaire précédent m'a embrouillé;)) (donc mon vote aussi pour la fonctionnalité intéressante ci-dessous)
Andreas Dietrich

Réponses:

530

Less n'évalue plus l'expression à l'intérieur calcpar défaut depuis v3.00.

Réponse originale ( Less v1.x...2.x):

Faites ceci:

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

Dans Less 1.4.0, nous aurons une strictMathsoption qui requiert que tous les calculs Less soient entre parenthèses, donc calccela fonctionnera "prêt à l'emploi". C'est une option car c'est un changement majeur. Les premières bêtas de 1.4.0 avaient cette option activée par défaut. La version finale le désactive par défaut.

Luke Page
la source
2
Notez que si vous compilez moins avec la récréation de Twitter, il ignore cet échappement . Au moins au moment de la rédaction de ce commentaire.
Attila Fulop
1
J'ai juste essayé calc(100% - 50px)dans less.css 1.4.0 et le résultat était calc(50%). L' ~"..."astuce impressionnante continue de fonctionner, mais je suis confus par la déclaration " prête à l'emploi", ce qui me fait penser que ce qui précède fonctionnerait. Luke, comment le support du calcchangement dans Less 1.4.0? Merci!
Brian M. Hunt
2
La question est pourquoi less.js a-t-il essayé de calculer cela en premier lieu? Il devrait lancer une erreur pour "100% - 250px" car il ne peut pas calculer une réponse sensée.
mpen
72
Pour les futurs lecteurs, vous pouvez également échapper uniquement à l'opérateur, ce qui vous permet également d'utiliser des variables. Exemple:calc(@somePercent ~"-" @someLength)
0b10011
10
Au lieu de moins mal calculer cela ou de lancer une erreur, pourquoi ne peut-il pas réaliser ce que l'utilisateur essaie de faire et le laisser tranquille? De toute évidence, un pourcentage et une valeur de pixel ne peuvent pas être calculés ensemble en moins.
dfmiller
37

Un cas d'utilisation très courant de calc est de prendre une largeur de 100% et d'ajouter une marge autour de l'élément.

On peut le faire avec:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
Sébastien Lorber
la source
-o-calc- n'est pas encore pris en charge .
un autre
28

Il existe plusieurs options d'échappement avec le même résultat: 

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

Il y a une façon plus ordonnée d'inclure des variables à l'intérieur du calcul échappé, comme expliqué dans cet article: La fonction CSS3 calc () ne fonctionne pas avec Less # 974

@variable: 2em;

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

En utilisant les accolades, vous n'avez pas besoin de fermer et de rouvrir les guillemets qui s'échappent.

frère
la source