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). Эта ссылка приведет вас к своим проводникам (на этой странице есть раздел об операторах).