web-dev-qa-db-fra.com

fonction calc () dans un autre calc () en CSS

Comment utiliser une fonction de calcul CSS dans une autre fonction de calcul CSS? Selon cela post c'est possible mais il n'y a aucun exemple de cela.

csscss3css-calc
27
Raghavendra Prasad

Il est possible d'utiliser calc () dans un autre calc ().

Un exemple:

div{
  width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/
}
div p{
  width: calc(100% - 30px);/*100% is total width of the div*/
}

Mise à jour sur nested calc avec les variables css:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

Une fois que toutes les variables sont développées, la valeur de widthC sera calc (calc (100px/2)/2), puis lorsqu'elle est affectée à la propriété width de .foo, tous les calc () internes (quelle que soit la profondeur d'imbrication) sera aplati entre parenthèses , donc la valeur de la propriété width sera finalement calculée ((100px/2)/2), soit 25px. En bref: un calc () à l'intérieur d'un calc () est identique à juste des parenthèses.

Ainsi, la spécification actuelle le prouve également en utilisant des parenthèses à l'intérieur de calc () est niché calc.

En savoir plus sur les variables css ici .

33
Bhojendra Rauniyar

Je suis l'un des éditeurs de la spécification Values ​​& Units, qui définit calc ().

calc () devrait être emboîtable à l'intérieur de calc (). Il y avait un oubli dans la grammaire/définitions pendant un certain temps qui techniquement ne le permettait pas, mais j'ai récemment corrigé cela. Les implémentations n'ont pas encore rattrapé, à ma connaissance (tho il ressemble à Chrome 51 et Firefox 48 auront ce problème résolu, woo!).

Cela dit, il y a raison zéro pour imbriquer normalement les expressions calc () - elles sont exactement identiques pour n'utiliser que des parenthèses. La seule raison de le faire est d'utiliser des propriétés/variables personnalisées.

35
Xanthir

La référence que vous avez citée est certes un peu confuse.

Il est pas possible d'utiliser une fonction calc dans une autre calc.

D'après les spécifications ici: http://dev.w3.org/csswg/css-values/#calc-notation

... Les composants d'une expression calc () peuvent être des valeurs littérales, des expressions attr () ou calc () ou des valeurs ..

Vous pouvez avoir une expression calc à l'intérieur des expressions, mais pas la fonction calc() elle-même.

Et un exemple est donné dans cette référence pour les expressions imbriquées:

width: calc(100%/3 - 2*1em - 2*1px);

Et aussi pour plusieurs calc pour plusieurs propriétés:

margin: calc(1rem - 2px) calc(1rem - 1px);

La syntaxe de la spécification ci-dessus:

La syntaxe d'une fonction calc () est:

<calc()> = calc( <calc-sum> ) 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Où une <dimension> est une dimension.

De plus, un espace est requis des deux côtés des opérateurs + et -. (Les opérateurs * et/peuvent être utilisés sans espace autour d'eux.)

Les agents d'utilisateur doivent prendre en charge les expressions calc () d'au moins 20 termes, où chaque NUMBER, DIMENSION ou PERCENTAGE est un terme. Si une expression calc () contient plus que le nombre de termes pris en charge, elle doit être traitée comme si elle n'était pas valide.

.

8
Abhitalks