CSS calc () - Multiplication et division avec des valeurs unitaires
Est-il possible d'utiliser calc () pour multiplier ou diviser avec des valeurs basées sur des unités (comme 100%, 5px, etc.).
Par exemple, j'espérais faire quelque chose comme ça:
width: calc(100% * (.7 - 120px / 100%));
En espérant qu'il se résout à quelque chose comme (en supposant que 100% = 500 px):
width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);
Cependant, après quelques expériences, il semble que je ne puisse pas avoir de valeur basée sur l'unité comme dénominateur pour la division.
Je ne semble pas non plus être capable de multiplier deux valeurs ensemble comme 5px * 10px ou 5px * 100%.
Je sais que cela n'a pas de sens dans 100% des cas de le permettre, mais dans mon cas d'utilisation, j'aimerais savoir quel pourcentage 120px est de la largeur totale, que j'alimente ensuite dans le reste de mon calcul.
Soit cela, soit si quelqu'un pouvait trouver une façon différente de l'écrire, cela fonctionnerait aussi. J'ai creusé la tête et je n'ai rien trouvé.
Dans la division CSS calc () - le côté droit doit être un <number> par conséquent, les valeurs basées sur les unités ne peuvent pas être utilisées dans une division comme celle-ci.
Notez également qu'en multiplication, au moins un des arguments doit être un nombre.
MDN a une excellente documentation à ce sujet.
Si vous souhaitez une meilleure façon de faire des calculs, vous pouvez utiliser un préprocesseur (j'aime Sass ). Ce lien vous mènera à leurs guides (sur cette page, il y a une section sur les opérateurs).