web-dev-qa-db-fra.com

Compilation moins agressive avec CSS3 calc

Les compilateurs Less que j'utilise ( OrangeBits et dotless 1.3.0.5 ) traduisent de manière agressive

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 lors de la compilation. J'ai parcouru la documentation Less et celle des deux compilateurs et je n'ai rien trouvé.

Est-ce que moins ou un compilateur supporte cela?

Si non, existe-t-il une extension CSS qui le fait?

csscss3compilationlesscss-calc
322
Nick Babcock

Less n'évalue plus l'expression dans calc par défaut depuis v3.00 .

Réponse originale (_Less v1.x...2.x_):

Faire ceci:

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

Dans Less 1.4.0, nous aurons une option strictMaths qui exige que tous les calculs de Less soient entre crochets, de sorte que la fonction calc fonctionnera "par défaut". C'est une option puisqu'il s'agit d'un changement radical majeur. Les versions antérieures de la version 1.4.0 avaient cette option activée par défaut. La version finale l'a désactivé par défaut.

516
Luke Page

Un cas très courant d'utilisation de calc est de prendre 100% de la largeur 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);
35
Sebastien Lorber

Il y a 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); }
28
icl7126

Il existe un moyen plus simple d’inclure des variables dans le 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.

8
brohr