Désactiver l'écrasement de LESS-CSS par calc()

Question

Pour l'instant, j'essaie de faire cela en CSS3 dans mon code LESS :

width: calc(100% - 200px);

Cependant, lorsque LESS est compilé, il produit ce résultat :

width: calc(-100%);

Existe-t-il un moyen d'indiquer à LESS de ne pas le compiler de cette manière et de l'afficher normalement ?

Answer 1

En utilisant un chaîne échappée (alias valeur échappée) :

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

---

De plus, au cas où vous auriez besoin de mélanger Less maths avec des chaînes de caractères échappées :

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

Compile vers :

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

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

Answer 2

En dehors de l'utilisation d'une valeur échappée comme décrit dans la section mon autre réponse Il est également possible de résoudre ce problème en activant l'option d'accès à l'information. Mathématiques strictes réglage.

Si l'option "mathématiques strictes" est activée, seules les données mathématiques contenues dans les parenthèses inutiles seront traitées :

width: calc(100% - 200px);

Fonctionnerait comme prévu avec l'option mathématique stricte activée.

Cependant Notez que les mathématiques strictes sont appliquées globalement, pas seulement à l'intérieur. calc() . Cela signifie que, si vous avez :

font-size: 12px + 2px;

Les mathématiques ne seront plus traitées par Less -- elles seront produites en sortie. font-size: 12px + 2px ce qui est, évidemment, un CSS invalide. Vous devriez envelopper tous les calculs qui doivent être traités par Less dans des parenthèses (auparavant inutiles) :

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

Les mathématiques strictes sont une option intéressante à prendre en compte lors du lancement d'un nouveau projet, sinon il faudrait éventuellement réécrire une bonne partie du code de base. Pour les cas d'utilisation les plus courants, l'approche de la chaîne échappée décrite dans le document autre réponse est plus approprié.

Answer 3

Voici un cross-browser moins mixin pour l'utilisation de CSS, calc avec toute la 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 sortie:

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/patrickberkeley/pen/zobdp

Answer 4

Exemple de chaîne de caractères échappée avec une variable :

@some-variable-height: 10px;

...

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

compile en

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

Answer 5

Les solutions de Fabricio fonctionnent très bien.

Un cas d'utilisation très courant de calc est l'ajout d'une largeur de 100% et d'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 vous pouvez 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);
}