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

Question

Как использовать функцию калькуляции CSS внутри другой функции калькуляции CSS? Согласно этому посту это возможно, но нет примера тому.

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

---

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

Невозможно использовать calc функционировать внутри другого calc,

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

... Компонентами выражения 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() содержит больше поддерживаемого количества терминов, оно должно рассматриваться как недействительное.

,