Функция Calc () внутри другого calc () в CSS

Как использовать функцию CSS calc внутри другой функции CSS calc? согласно этому сообщению ("https://developer.mozilla.org/en-US/docs/Web/CSS/calc") это возможно, но нет примера этого.

19
css css-calc css3

3 ответов

можно использовать calc () внутри другого calc ().

пример:

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*/
}

обновление вложенный calc с переменными css:

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

после того, как все переменные будут расширены, значение widthC будет calc( calc( 100px / 2) / 2), а затем, когда оно назначено .свойство ширины foo, все внутренние calc () s (независимо от того, насколько глубоко вложены)будет сглажен до круглых скобок, поэтому ширина значение свойства будет в конечном итоге calc ((100px / 2) / 2), т. е. 25px. Короче говоря: calc () внутри calc () идентичен только скобкам.

таким образом, текущая спецификация также доказывает это, используя круглые скобки внутри calc (), является вложенным calc.

Узнайте больше о переменных css здесь.

19

Я один из редакторов спецификации Values & Units, которая определяет calc().

calc ()должны быть гнездящимся внутри calc (). Некоторое время в грамматике/определениях была оплошность, что технически не разрешил, но я недавно исправил это. Реализации еще не догнали, насколько мне известно (tho похоже, что Chrome 51 и Firefox 48 будут иметь это исправлено, Ву!).

Это ноль причина в выражения nest calc () обычно - они в точности просто используя круглые скобки. Единственная причина делать это вообще при использовании пользовательских свойств/переменных.

25

ссылка, которую вы процитировали, по общему признанию, немного запутана.

это не можно использовать внутри calc.

из спецификаций здесь:http://dev.w3.org/csswg/css-values/#calc-notation

...Компонентами выражения calc() могут быть литеральные значения, attr () или выражения calc() или значения..

вы можете calc выражение внутри выражения, но не calc() сама функция.

и пример приведен в этом ref для вложенных выражений:

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

и несколько calc для нескольких свойств:

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

синтаксис из спецификации выше:

синтаксис функции calc ():

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

где - это измерение.

кроме того, пробелы требуются с обеих сторон + и - операторы. (*И / operaters можно использовать без пробелов вокруг них.)

UAs должен поддерживать выражения calc() не менее 20 терминов, где каждый Число, измерение или процент-это термин. Если выражение calc() содержит больше, чем поддерживаемое количество терминов, его необходимо обработать как будто он был недействителен.

.

8