CSS calc() - умножение и разделение с единичными значениями

Можно ли использовать calc() для умножения или деления на единичные значения (например, 100%, 5 пикселей и т.д.).

Например, я надеялся сделать что-то вроде этого:

width: calc(100% * (.7 - 120px / 100%));

Надеясь, что он решил что-то вроде (при условии 100% = 500 пикселей):

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);

Однако после некоторых экспериментов это выглядит так, что я не могу иметь значение, основанное на единицах, как знаменатель для деления.

Я также, кажется, не могу использовать несколько двух значений, например, 5px * 10px или 5px * 100%.

Я знаю, что это не имеет смысла в 100% случаев, чтобы это разрешить, но в моем случае использования я хотел бы знать, какой процент 120 пикселей имеет общую ширину, которую я затем подаю на оставшуюся часть моего расчет.

Либо это, либо если кто-то может понять другой способ написать его, это тоже сработает. Я разбил свой мозг и ничего не мог придумать.

ОТВЕТЫ

Ответ 1

В подразделении CSS calc() - правая сторона должна быть <number> поэтому единицы, основанные на значении, не могут использоваться в таком делении.

Также обратите внимание, что при умножении хотя бы один из аргументов должен быть числом.

У этого MDN есть отличная документация.

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