Désactiver l’écrasement CSS CSS ()

En utilisant une chaîne d’échappement (valeur échappée):

 width: ~"calc(100% - 200px)"; 

En outre, si vous devez mélanger moins de maths avec des chaînes échappées:

 width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em"); 

Comstack pour:

 width: calc(100% - 15rem + 15px + 2em); 

Cela fonctionne comme moins concatène les valeurs (les chaînes échappées et le résultat mathématique) avec un espace par défaut.

Outre l’utilisation d’une valeur d’échappement décrite dans mon autre réponse , il est également possible de résoudre ce problème en activant le paramètre Ssortingct Math .

Avec des calculs ssortingcts, seuls les maths entre parenthèses inutiles seront traités, votre code:

 width: calc(100% - 200px); 

Fonctionne comme prévu avec l’option mathématique ssortingcte activée.

Cependant , notez que Ssortingct Math est appliqué globalement, pas seulement dans calc() . Cela signifie que si vous avez:

 font-size: 12px + 2px; 

Le calcul ne sera plus traité par Less – il affichera font-size: 12px + 2px ce qui est évidemment un CSS non valide. Vous devriez envelopper tous les maths qui doivent être traités par des parenthèses moins (auparavant inutiles):

 font-size: (12px + 2px); 

Ssortingct Math est une option intéressante à prendre en compte lors du démarrage d’un nouveau projet, sinon vous devrez peut-être réécrire une bonne partie de la base de code. Pour les cas d’utilisation les plus courants, l’approche de chaîne d’échappement décrite dans l’ autre réponse est plus appropriée.

Voici un mixin moins multi-navigateur pour utiliser la calc de CSS avec n’importe quelle propriété:

 .calc(@prop; @val) { @{prop}: calc(~'@{val}'); @{prop}: -moz-calc(~'@{val}'); @{prop}: -webkit-calc(~'@{val}'); @{prop}: -o-calc(~'@{val}'); } 

Exemple d’utilisation:

 .calc(width; "100% - 200px"); 

Et le CSS qui est sorti:

 width: calc(100% - 200px); width: -moz-calc(100% - 200px); width: -webkit-calc(100% - 200px); width: -o-calc(100% - 200px); 

Un codepen de cet exemple: http://codepen.io/pasortingckberkeley/pen/zobdp

Exemple de chaîne d’échappement avec variable:

 @some-variable-height: 10px; ... div { height: ~"calc(100vh - "@some-variable-height~")"; } 

comstack à

 div { height: calc(100vh - 10px ); } 

Les solutions de Fabricio fonctionnent parfaitement.

Une méthode très courante de calcul est d’append 100% de largeur et d’append 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); width: -o-calc(~"100% - "@someMarginVariable*2); 

Ou peut utiliser un mixin comme:

 .fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) { @minusValue: (@marginSize+@paddingSize)*2; padding: @paddingSize; margin: @marginSize; width: calc(~"100% - "@minusValue); width: -moz-calc(~"100% - "@minusValue); width: -webkit-calc(~"100% - "@minusValue); width: -o-calc(~"100% - "@minusValue); }