Безразмерные переменные CSS: обработка преобразования единиц измерения

При работе с переменными CSS часто желательно использовать безразмерные значения, чтобы сохранить гибкость и контроль над представлением. Однако свойства CSS ожидают определенных единиц в различных ситуациях. В этом руководстве будет продемонстрирована техника использования безразмерных переменных и плавного преобразования их в необходимые единицы измерения.

Сценарий:

Вам необходимо определить переменную --mywidth с помощью числовое значение. Однако в CSS вы хотите использовать эту переменную как в процентах от ширины элементов, так и в виде простого числа для операций Calc().

Решение:

calc() и умножение единиц измерения:

Чтобы добиться этого, используйте функцию Calc() и выполните простое умножение с нужной единицей измерения. Например:

div { width: calc(var(--mywidth) * 1%); }

Этот подход изменяет масштаб безразмерной переменной --mywidth до процентного значения в соответствии с требованиями свойства ширины. Аналогично, чтобы использовать переменную в качестве числа для вычислений, соответствующим образом отрегулируйте множитель:

calc(var(--mywidth) * 1px)

Пример:

Рассмотрим следующий код:

:root {
  --a: 50;
}

.box {
  width: calc(var(--a) * 1%);
  border: calc(var(--a) * 0.5px) solid red;
  background: linear-gradient(calc(var(--a) * 0.8deg), blue 50%, green 0);
  padding: 20px;
  box-sizing: border-box;
}

В этом примере переменная --a начинается без единицы измерения. В классе .box функция Calc() используется для преобразования значений в проценты, пиксели и градусы по мере необходимости. В результате получается поле с указанными размерами, шириной границы, углом градиента и отступом.

Этот метод позволяет вам определять переменные CSS с безразмерными значениями и впоследствии преобразовывать их в соответствующие единицы измерения, обеспечивая большую гибкость и эффективность. в вашем стиле CSS.