Désactiver LESS-Css Overwriting calc () [dupliquer]
cette question a déjà une réponse ici:
- Compilation moins agressive avec CSS3 calc 4 réponses
en ce moment j'essaie de le faire en CSS3 dans mon moins de code:
width: calc(100% - 200px);
Toutefois, lorsque MOINS compile est sortie:
width: calc(-100%);
y a-t-il un moyen de dire à moins de ne pas le compiler de cette manière et de le sortir normalement?
5 réponses
utilisant une chaîne échappée (A. K. A. valeur échappée):
width: ~"calc(100% - 200px)";
aussi, dans le cas où vous avez besoin de mélanger moins de mathématiques avec des cordes échappées:
width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");
Compile:
width: calc(100% - 15rem + 15px + 2em);
cela fonctionne comme des valeurs moins concaténées (les chaînes échappées et le résultat mathématique) avec un espace par défaut.
outre l'utilisation d'une valeur échappée comme décrit dans mon autre réponse , il est également possible de corriger cette question en activant le réglage Strict Math .
avec des maths strictes, seuls les maths qui sont entre parenthèses inutiles seront traités, donc votre code:
width: calc(100% - 200px);
fonctionnerait comme prévu avec l'option mathématique stricte activée.
Toutefois , notez que les mathématiques strictes sont appliquées globalement, pas seulement à l'intérieur de calc() . Cela signifie, Si vous avez:
font-size: 12px + 2px;
le calcul ne sera plus traité par moins -- il produira font-size: 12px + 2px qui est, de toute évidence, invalide CSS. Vous devez envelopper tous les maths qui devraient être traitées par moins dans (auparavant inutile) les parenthèses:
font-size: (12px + 2px);
mathématiques strictes est une bonne option à considérer lors du démarrage d'un nouveau projet, sinon il faudrait peut-être réécrire une bonne partie du code. Pour les cas d'utilisation les plus courants, l'approche de la chaîne échappée décrite dans autre réponse est plus appropriée.
voici un cross-browser moins de mixin pour utiliser le 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'usage:
.calc(width; "100% - 200px");
et la sortie CSS that's:
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
exemple de chaîne échappée avec variable:
@some-variable-height: 10px;
...
div {
height: ~"calc(100vh - "@some-variable-height~")";
}
compile
div {
height: calc(100vh - 10px );
}
les solutions de Fabricio fonctionne très bien.
une utilisation très courante de calc est d'ajouter 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);
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);
}