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

Ответ 1

Можно использовать 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*/
}

Обновление по вложенным вычислениям с переменными css:

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

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

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

Подробнее о css-переменных читайте здесь.

Ответ 2

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

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

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

Ответ 3

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

Это не представляется возможным использовать calc функцию внутри другой 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> ) 

Где <измерение> - измерение.

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

UA должны поддерживать выражения calc() не менее 20 терминов, где каждый NUMBER, DIMENSION или PERCENTAGE является термином. Если выражение calc() содержит больше, чем поддерживаемое количество терминов, оно должно рассматриваться как недопустимое.

,