Less.js: La fonction CSS3 calc() ne fonctionne pas avec LESS
Je sais que cela a déjà été signalé, mais des bogues ont été fermés en raison d'informations insuffisantes.
J'ai le code CSS suivant :
#id1 {
position: fixed;
left: 0; top: 0;
width: 130px;
}
#id2 {
position: fixed;
right: 0; top: 0;
width: calc(100% - 130px);
}
Je voulais le transformer en LESS en utilisant 130px comme paramètre mais calc est interprété par LESS et ceci :
<strong i="11">@id1width</strong>: 130px
#id1 {
position: fixed;
left: 0; top: 0;
width: @id1width;
}
#id2 {
position: fixed;
right: 0; top: 0;
width: calc(100% - @id1width);
}
transforme l'avant-dernière ligne en width: calc(-30%); ce qui n'est clairement pas ce qui est souhaité. J'ai essayé d'utiliser width: ~"calc(100% - @id1width)"; mais cela fait que @id1width n'est pas interprété.
Je pense que LESS ne devrait pas utiliser les choses réservées par CSS3 pour son usage interne...
mgol
Tous les 51 commentaires
ils ont probablement été fermés en tant que doublons.. bien que je ne puisse pas en trouver un à propos de calc.. voir #146 #122 et #915
solution de contournement : width: ~"calc(100% - @{id1width})"; - notez les accolades autour de la variable.
Nous passons à un système où seuls les éléments entre crochets seront évalués pour résoudre ce problème.
lukeapage
le 8 oct. 2012
:+1:
shankarcabus
le 18 déc. 2012
<strong i="5">@rows</strong>: 10;
<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;
.featured1
{
top: ~'-webkit-calc(@{row1} + 20px)';
right: 0;
bottom: @row5;
left: @col9;
}
Ce bit de MOINS traitera la valeur de « @row1 » à 10 %, ce qui est excellent. Mais lorsqu'il est à l'intérieur d'une section échappée de LESS et enveloppé dans des boucles pour conserver la variable LESS, il renvoie « 10 » sans le « % ».
J'ai trouvé une solution de contournement qui ne m'a pas encore échoué. Si vous placez un autre '%' après la fermeture bouclée de la variable 'row1' à l'intérieur du code échappé, cela fonctionnera correctement...
~'-webkit-calc(@{row1}% + 20px)';
Mais cela semble être tout un hack à ajouter dans un autre type d'unité qui est censé être déjà dans la variable.
jonjohnjohnson
le 19 déc. 2012
@jonjohnjohnson ceci est corrigé dans head et sera dans 1.3.2
le reste de ce bug sera résolu dans la 1.4.0
lukeapage
le 19 déc. 2012
Je ne sais pas si c'est le même problème, mais j'ai un problème avec ce qui suit. Notez qu'il n'y a pas de trucs moins spécifiques ici, moins 1.3.3 est en train de manipuler du CSS autrement valide.
Voici le CSS
html, body {
margin:0, padding:0, border:0;
height: 100%;
}
#content {
height: -webkit-calc(100% - 40px);
height: calc(100% - 40px);
background-color:gray;
}
#footer {
background-color:black;
}
Et voici le HTML pour l'inclure
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>
"content" est défini sur une hauteur de 60%, donc moins est l'analyse et la résolution incorrecte de l'expression calc plutôt que de la transmettre inchangée au navigateur. Testé dans Safari 6.0.2 et Firefox.
faceless2
le 14 janv. 2013
Corrigé sur le maître pour la 1.4.0
lukeapage
le 2 févr. 2013
height: ~"calc(100% - 50px)";
produit toujours :
height: calc(50%);
pour moi. Je veux:
height: calc(100% - 50px);
OliverJAsh
le 3 juin 2014
De plus, il produit toujours height: calc(50%); même avec des mathématiques strictes définies sur on .
OliverJAsh
le 3 juin 2014
@OliverJAsh Je ne peux pas reproduire vos résultats avec Less 1.7.0 (la valeur échappée et --strict-math:on fonctionnent comme prévu)... Pourriez-vous s'il vous plaît fournir plus de détails sur le compilateur/environnement/scripts que vous utilisez ? (Juste au cas où il y aurait un problème de script de construction Bootstrap qui pourrait conduire à de tels résultats incorrects : https://github.com/twbs/bootstrap/issues/13604, c'est peut-être votre cas aussi ?).
seven-phases-max
le 3 juin 2014
J'avais ce problème dans la version 1.6.3 (pour une raison quelconque, WinLESS se bloque à la compilation lorsque je passe à la version 1.7.x, je m'en tiens donc à la version 1.6.x pour le moment)
Ma solution rapide était juste d'échapper à une partie de l'équation comme :
height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));
Cela fonctionne même pour les variables, comme <strong i="10">@var</strong>: 50 . Ou vous pourriez échapper à tout le calcul comme calc(~"100% - 50px");
twiginteractive
le 26 juil. 2014
@twiginteractive Si vous devez utiliser l'échappement avec l'option --strict-math off (paramètre par défaut), ce n'est pas un problème mais un comportement attendu. Voir --strict-math .
seven-phases-max
le 26 juil. 2014
@seven-phases-max Hmmm - selon la documentation, avec SM désactivé (par défaut), alors cela _devrait_ être analysé correctement (c'est-à-dire intact)
height: calc(100% - 10px);
Mais ce n'est pas le cas. Le CSS de sortie est height: calc(90%); , ce qui n'est pas le résultat souhaité. Peut-être que cela est corrigé dans la 1.7, mais comme je l'ai dit, je ne peux pas utiliser cette version pour le moment tant que je n'ai pas compris ce qui casse la compilation WinLESS.
(À moins que je ne lis mal les documents lorsqu'il est dit "sera traité correctement"... LESS ne peut pas connaître la valeur de 100%, il ne devrait donc pas faire de calcul mathématique sur "100% - 10px")
twiginteractive
le 26 juil. 2014
@twiginteractive
selon la documentation, avec SM désactivé (par défaut), cela devrait être analysé correctement (c'est-à-dire intact)
Non, le mot y est currently non correctly (c'est-à-dire "sera _traité_ actuellement").
seven-phases-max
le 26 juil. 2014
@seven-phases-max Ah - mon mauvais, cela a du sens maintenant. Merci pour la clarification.
twiginteractive
le 27 juil. 2014
hauteur : ~"calc(100% - 50px)" ; A travaillé pour moi.
aamirshahzad
le 5 sept. 2014
C'est là que Less.js commence à perturber votre code.
height: _calc(50%);
height: calc(100% - 50%); /* browser-native */
stevenvachon
le 5 sept. 2014
@stevenvachon
Soi-disant v2.0 aura la possibilité de préfixer ses fonctions comme ceci :
Cela n'affectera en aucun cas calc . Il n'y a pas de fonction calc intégrée, Less évalue simplement une expression mathématique en fonction de ses règles (de Less). C'est ça. Si vous ne voulez pas ce "gâchis", utilisez --strict-math .
seven-phases-max
le 5 sept. 2014
Ps la solution à ce problème est mathématique stricte. Et peut-être devrions-nous
forcer les mathématiques strictes lors d'un appel à calc?
lukeapage
le 5 sept. 2014
Le problème s'étend lors de l'utilisation de Myth after Less.
stevenvachon
le 5 sept. 2014
Pourquoi? Le mythe supprime-t-il les parenthèses ? Les mathématiques strictes font moins un sur-ensemble approprié
de css.
lukeapage
le 5 sept. 2014
Et peut-être devrions-nous forcer les mathématiques strictes lors d'un appel à calc ?
Nous en avons discuté dans #1872 et il y a quelques arguments contre les solutions de contournement "local strict- math:on ". La solution proposée (pas encore tout à fait décidée) est en #1880.
seven-phases-max
le 5 sept. 2014
@stevenvachon
Même avec strictMath, nous devons ~"calc(...)" pour que Less l'ignore.
Exemple? C'est-à-dire un extrait où Less visse une expression à l'intérieur de calc avec --strict-math=on .
seven-phases-max
le 5 sept. 2014
Depuis quand le préfixe v2 fonctionnera-t-il ? Avons-nous décidé cela et j'ai oublié?
lukeapage
le 6 sept. 2014
Depuis quand le préfixe v2 fonctionnera-t-il ? Avons-nous décidé cela et j'ai oublié?
Non. Je suppose que c'était juste un peu surestimé https://github.com/less/less.js/issues/2102#issuecomment -50286985.
seven-phases-max
le 6 sept. 2014
Oui, désolé, pas "l'option de" mais "la possibilité d'écrire un plugin fournissant l'option de". Je vais devoir tester à nouveau du code avec et sans J'ai dû me tromper il y a quelque temps et j'ai continué à avancer avec ce malentendu. J'ai un ancien code que je vais devoir modifier maintenant.~"" sur calc() .
stevenvachon
le 6 sept. 2014
J'ai remarqué que quelque chose de bizarre se produisait avec calc lorsqu'il était utilisé en conjonction avec width . J'ai tout mis dans un codepen juste pour le rendre plus facile : http://codepen.io/anon/pen/OVpJvP
alenb
le 2 juin 2015
@alenb
Alors qu'y a-t-il d'étrange là-dedans ? Le code dans votre codepen est compilé comme prévu...
seven-phases-max
le 2 juin 2015
@sept-phases-max
C'est compilé, mais ce n'est pas ce qui est attendu. Vérifiez le code CSS d'un peu plus près.
C'est étrange car il a encore un écart à l'extrême droite même s'il devrait s'étirer complètement avec les 3 colonnes. Les deux premières colonnes doivent être de 33,33 % moins 20 pixels, la dernière colonne étant de 33,33 %. Les 2 premières colonnes auraient un padding-right de 20px, mais cela ne se reflète pas car il y a évidemment un espace à l'extrême droite.
J'ai joué plus avec hier soir et margin-right au lieu de padding-right fait l'affaire et résout le problème.
alenb
le 3 juin 2015
@alenb
C'est compilé, mais ce n'est pas ce qui est attendu. Vérifiez le code CSS d'un peu plus près.
Bien sûr, je l'ai fait. Donc, si vous vous attendez à quelque chose de différent, veuillez le préciser.
Les 2 premières colonnes auraient un padding-right de 20px, mais cela n'est pas reflété
padding n'affecte en aucune manière la largeur (à moins que vous ne définissiez des [ box-sizing ](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get :
(33% - 20px) + (33% - 20px) + 33% = 99% - 40px -> 40px` écart comme prévu.
Quoi qu'il en soit, cela est lié uniquement au CSS et n'a rien à voir avec la façon dont Less compile calc . Cliquez sur le bouton "afficher compilé" dans le code de codepen et vous verrez que vos déclarations calc sont compilées par Less exactement selon ce que vous avez spécifié).
seven-phases-max
le 3 juin 2015
@sept-phases-max
J'aurais pensé que le codepen rendrait cela évident, mais aucun problème du tout.
Merci pour l'info!
alenb
le 3 juin 2015
Aujourd'hui, cela ne fonctionne toujours pas avec l'installation par défaut de moins (en utilisant npm).
J'ai dû utiliser :
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);
Je ne sais pas si c'est normal, car le bug est marqué "fermé", mais je voulais juste vous le faire savoir.
rkyoku
le 8 avr. 2016
@RenaudParis --strict-math
seven-phases-max
le 8 avr. 2016
D'accord je vais essayer ça, merci ! Mais ne vaudrait-il pas mieux que ce soit par
défaut? Parce que c'est assez surprenant, quand on ne sait pas à ce sujet
paramètre.
Merci quand même!
Le ven. 8 avr. 2016 à 20:48, Max Mikhailov [email protected] a
écrit :
@RenaudParis https://github.com/RenaudParis --strict-math
http://lesscss.org/usage/#command-line-usage-strict-math-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/less/less.js/issues/974#issuecomment-207553212
rkyoku
le 8 avr. 2016
Mais ne vaudrait-il pas mieux que ce soit par défaut ?
Le faire par défaut cassera beaucoup de bases de code Less existantes. Une fois (à ~ v1.4.0 ) il y a eu une tentative pour en faire la valeur par défaut en fait, mais ensuite c'est inversé en raison de la rétrocompatibilité héritée... Une méthode plus récente et moins intrusive a été développée à #1880 (mais il n'est pas encore implémenté).
seven-phases-max
le 9 avr. 2016
D'accord, merci d'avoir pris le temps de me l'expliquer Max !
Le sam. 9 avr. 2016 13:46, Max Mikhailov [email protected] a
écrit :
Mais ne vaudrait-il pas mieux que ce soit par
défaut?Le faire par défaut cassera beaucoup de bases de code Less existantes. Une fois que
(à ~v1.4.0) il y a eu une tentative pour en faire la valeur par défaut, mais
puis il est inversé en raison de la rétrocompatibilité héritée... Un plus récent,
méthode moins intrusive a été développée à #1880
https://github.com/less/less.js/issues/1880 (mais ce n'est pas implémenté
encore)).-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/less/less.js/issues/974#issuecomment -207776654
rkyoku
le 9 avr. 2016
J'ai résolu ceci :
.calc(<strong i="6">@prop</strong>, @val) {
@{prop}: ~"calc(~'@{val}')";
@{prop}: ~"-moz-calc(~'@{val}')";
@{prop}: ~"-webkit-calc(~'@{val}')";
@{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");
Quand j'utilise command line c'est correct. Seul less-loader n'est pas correct. J'ai donc trouvé cette solution sur stackoverflow
Je le copie dans mon code, malheureusement ce n'est pas non plus correct. J'ai donc modifié quelque chose. Ça marche!
Malheureusement, la ligne de commande n'est pas correcte !!😂 😂 😂
mqliutie
le 1 sept. 2016
Je ne sais pas pourquoi ce problème est fermé. Cela n'a pas de sens que Less change un comportement CSS natif.
vincentmorneau
le 3 nov. 2016
... Moins changerait un comportement CSS natif.
Ce ne serait pas le cas. Il suffit de définir --strict-math=on (non activé par défaut en raison de la compatibilité avec une quantité gigantesque de projets Less dépendant de --strict-math=off , plus quelques considérations mentionnées à #1880).
seven-phases-max
le 4 nov. 2016
Dans un thème UIkit 3, j'utilise ceci dans my_theme.less :
height: ~"calc(100vh - 20px)";
Et il fonctionne.
oshihirii
le 6 août 2017
Cela a fonctionné pour moi lors de l'écriture dans le fichier *.less https://github.com/less/less.js/issues/974#issuecomment -9229470
Merci @lukeapage ! ??
quytm2239
le 16 oct. 2017
Salut @mqliutie merci d'avoir ajouté la suggestion mixin pour calc, mais il y a un extra ~ dans votre Mixin qui cassait la compilation :
le mélange doit être
.calc(<strong i="8">@prop</strong>, @val) {
@{prop}: ~"-webkit-calc('@{val}')";
@{prop}: ~"-moz-calc('@{val}')";
@{prop}: ~"calc('@{val}')";
}
Saisissez comme suit :
.calc(largeur, "100% - 60px");
Sortie comme suit :
largeur : calc(100% - 60px);
ciaranlp
le 19 oct. 2017
Pourquoi ce problème est-il clos ?! Ce n'est pas réglé.
J'obtiens toujours calc(30%) quand j'écris calc(50% - 20px) . Ce n'est jamais ce que personne ne veut. Mis à part le fait qu'il est erroné de calculer aveuglément avec différentes unités, il devrait le laisser tel quel dans un calc(), à moins qu'il ne puisse être calculé avec une fiabilité à 100% (par exemple les mêmes unités). J'utilise MOINS 2.7.3.
Veuillez rouvrir ce problème.
thany
le 25 janv. 2018
@thany
Reportez-vous à ces commentaires, ils décrivent comment ce n'est pas exactement un problème, dans la mesure où le paramètre par défaut du traitement des mathématiques est un sous-produit de l'histoire, et vous pouvez toujours modifier le paramètre par défaut.
https://github.com/less/less.js/issues/974#issuecomment-207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654
jonjohnjohnson
le 25 janv. 2018
@jonjohnjohnson Cela ne fait
Peu importe comment vous le dites, ce problème n'est résolu par aucune définition.
thany
le 26 janv. 2018
@thany J'essayais juste de vous aider à comprendre que les développeurs ont décidé que ce n'était pas un problème selon eux. Ces commentaires ne se contentent pas de reformuler le problème, ils décrivent la position des développeurs sur le problème. Bonne chance.
jonjohnjohnson
le 26 janv. 2018
@thany
alors il devrait être activé par défaut.
Cela ne peut pas être parce que cela briserait immédiatement des millions de projets. Donc, si vous traitez le comportement par défaut comme un problème, définissez simplement l'option documentée et terminez. Par n'importe quelle définition.
Pourquoi ce problème est-il clos ?!
Parce que la discussion à jour sur la façon d'améliorer le comportement par défaut est ici .
seven-phases-max
le 26 janv. 2018
@thany En tant que @seven-phases-max, si vous voulez voir ce problème résolu, contribuez au #1880. Je pense que la solution est là, mais il n'y a pas eu suffisamment de poids communautaire pour arriver à une décision qui est prête à être mise en œuvre. C'est un long fil, mais c'est ce qu'il faut pour trouver des solutions : examiner les propositions et peser d'une manière ou d'une autre. Et puis : quelqu'un pour prendre en charge le travail à mettre en œuvre.
matthew-dean
le 27 janv. 2018
width: 15%;
height: ~"calc(width)";
comment faire hauteur = largeur
xiaomizhou66
le 18 nov. 2018
@xiaomizhou66
Cela n'a rien à voir avec LESS, ni avec ce problème. C'est purement une question CSS. Veuillez rechercher quelque chose comme "css keep aspect" et vous trouverez des réponses.
thany
le 26 nov. 2018
Donc c'est toujours cassé. calc (100vh - 138px) sort à -38px.
willatathena
le 15 mars 2019
@willatathena
Si vous rencontrez ce problème avec Less 3.x, veuillez créer un rapport de bogue séparé.
Pour les versions antérieures de Less, ce comportement est attendu par défaut (lisez les articles ci-dessus pour savoir comment le gérer).
seven-phases-max
le 16 mars 2019
Questions connexes
awebdev
·
4Commentaires
falkenhawk
·
5Commentaires
yggi49
·
7Commentaires
seven-phases-max
·
6Commentaires
chricken
·
6Commentaires
Commentaire le plus utile
ils ont probablement été fermés en tant que doublons.. bien que je ne puisse pas en trouver un à propos de calc.. voir #146 #122 et #915
solution de contournement :
width: ~"calc(100% - @{id1width})";- notez les accolades autour de la variable.Nous passons à un système où seuls les éléments entre crochets seront évalués pour résoudre ce problème.