Comment empêcher Less d'essayer de compiler les propriétés CSS calc() ?

Question

Le site Moins que j'utilise ( OrangeBits et dotless 1.3.0.5 ) traduisent agressivement

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

en

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 l'attribut pendant la compilation. J'ai cherché dans la documentation de Less et dans celle des deux compilateurs, et je n'ai rien trouvé.

Est-ce que Less ou un compilateur Less supporte cela ?

Si ce n'est pas le cas, existe-t-il une extension CSS qui le fasse ?

Answer 1

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

---

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

Faites-le :

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

Dans la version Less 1.4.0, nous aurons une fonction strictMaths qui exige que tous les calculs de leçons soient entre parenthèses, donc l'option calc fonctionnera "prêt à l'emploi". C'est une option, car il s'agit d'un changement majeur. Dans les premières versions bêta de la 1.4.0, cette option était activée par défaut. Dans la version finale, elle est désactivée par défaut.

Answer 2

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);

Answer 3

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); }

Answer 4

Il existe un moyen plus simple d'inclure des variables à l'intérieur du calc é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 échappés.