Объедините CSS-переменные и calc()

Я хочу объединить CSS-переменные и calc(), но, как указано в этой теме раньше (у которого нет точного ответа) кажется, что проблема возникает, если вы делаете что-то вроде следующего:

--a: 1;
--b: 2; 
--result: calc(var(--a) + var(--b));

Выход для этого примера, конечно, должен быть 3, но если вы используете var(--result), он просто имеет значение var(calc(1 + 2)).

Примечание. Я не хочу использовать препроцессор (например, sess или lass), только собственный CSS.

Итак, мой вопрос: можно ли каким-то образом заставить функцию calc() выполняться до того, как ее результат будет использован в var(--result)?

Заранее спасибо!


css css-variables css-calc
person Community    schedule 30.07.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

CSS — это не C++, поэтому это не инструкции для последовательного выполнения, это объявление CSS.

--result равно calc(var(--a) + var(--b)), и только когда вы будете использовать переменную, браузер выполнит окончательный расчет, потому что --a и --b могут меняться в зависимости от элемента, поэтому утверждение, что --result должно быть равно 3, неверно.

Вот пример, иллюстрирующий это:

.box {
  --a: 1;
  --b: 2;
  --result: calc(var(--a) + var(--b));
  height: calc(var(--result) * 10px);
  border: 1px solid;
}

.alt {
  --a: 2;
}
<div class="box">
 my height is equal to 30px because result is evaluated to 3 (1+2)
</div>

<div class="box alt">
 my height is equal to 40px because result is evaluated to 4 (2+2)
</div>

person Temani Afif    schedule 30.07.2018