web-dev-qa-db-fra.com

Désactiver LESS-CSS Overwriting calc ()

En ce moment, j'essaie de faire cela en CSS3 dans mon code MOINS:

width: calc(100% - 200px);

Cependant, quand LESS compile, il produit ceci:

width: calc(-100%);

Y a-t-il un moyen de dire à LESS de ne pas le compiler de cette manière et de le sortir normalement?

csscss3lesscss-calc
419
AJStacy

Utilisation d'une chaîne échappée (a.k.a. valeur échappée):

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

De plus, au cas où vous auriez besoin de mélanger Moins de mathématiques avec des chaînes échappées:

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

Compile à:

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

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

770
Fabrício Matté

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

Si les mathématiques sont strictes, seules les mathématiques entre parenthèses inutiles seront traitées. Votre code:

width: calc(100% - 200px);

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

Cependant , notez que Strict Math est appliqué globalement, pas seulement à l'intérieur de calc(). Cela signifie que si vous avez:

font-size: 12px + 2px;

Le calcul ne sera plus traité par Less - il produira font-size: 12px + 2px qui est, de toute évidence, CSS non valide. Vous devez envelopper tous les maths qui devraient être traités par Less entre parenthèses (précédemment inutiles):

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

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

62
Fabrício Matté

Voici un mixin moins multi-navigateur pour utiliser 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 sort:

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

23
Patrick Berkeley

Exemple de chaîne échappée avec variable:

@some-variable-height: 10px;

...

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

compile pour

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

Les solutions de Fabricio fonctionnent très bien.

Un cas d'utilisation très courant de calc est d'ajouter 100% de 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);
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);
}
6
Sebastien Lorber