Переменные CSS с арифметическими операциями не работают в сокращенных свойствах?

Question

Пожалуйста, помогите мне выяснить, почему арифметическая операция в переменной CSS нарушает код.

Я начал с простого файла CSS с одним правилом:

html {
  font: 16px/32px Arial;
}

В браузерах это работает как написано: размер шрифта 16px, высота строки 32px, а сам шрифт Arial.

Затем я добавил переменные:

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

Это тоже работает; думал, что высота строки составляет 16 пикселей, потому что я сделал его равным размеру шрифта.

Но когда я умножил второе значение, объявление шрифта перестало работать:

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size) * 2;
  font: var(--default-font-size)/var(--default-line-height) Arial;  /* not working! */
}

Все свойства font-size, line-height, а также font-family установлены по умолчанию в браузере.

Если я разделю font Сокращенное свойство на три различных сокращенных свойства, код снова работает нормально:

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size) * 2;
  font-size: var(--default-font-size);
  line-height: var(--default-line-height);
  font-family: Arial;
}

Что не так с предыдущим примером кода и есть ли способ заставить его работать, не разбивая на свойства longhand?

Answer 1

Вам нужно использовать calc как это:

html {
  --default-font-size: 16px;
  --default-line-height: calc(var(--default-font-size) * 2);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

--default-line-height заменяется в font свойство перед оценкой, поэтому у вас есть что-то вроде этого (недействительно):

font: var(--default-font-size)/var(--default-font-size) * 2 Arial;

С помощью calc Вы оцениваете выражение, и у вас есть правильный синтаксис. Даже ваш третий пример не сработает. CSS не распознает знак умножения, так как он должен использоваться внутри calc

p {
  --default-font-size: 16px;
  --default-line-height: calc(var(--default-font-size) * 4);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>