Использование CSS-функции calc() в LESS

В CSS есть функция calc(), которая даёт возможность рассчитать значения свойств CSS во время их определения. Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов. Можно использовать разные единицы измерения для каждого из операндов, а также можно использовать скобки, чтобы указать порядок вычисления.

Например:

.item {
  width: calc(100% - 10px);
}

Но при использование препроцессора LESS нужно использовать немного другой вывод:

.item {
  width: calc(~'100% - 10px');
}

Вариант использования функции calc() в LESS с переменными:

.item {
  @pad: 10px;
  width: calc(~'100% - @{pad}');
}
Google Fonts. Документация и примеры использования

Все умеют подключать и использовать Google Fonts, это так просто и так популярно, но никто…

Простой способ задать отступы между flexbox элементами

Вариант 1 — отрицательный отступ для родительского блока Самый простой способ установить минимальное расстояние между…

Итерация потомков (nth-child) с использованием SASS

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…

Плавный скролл по странице к нужному ID (Scroll to id)

Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…

Ответить