Препроцессор CSS LESS. Изучаем LESS чтобы ускорить версктку сайта и веб-страниц.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я продолжаю рубрику: Верстка сайтов и ее раздел Препроцессор LESS. CSS не позволяет выполнять даже простейшие математические операции, которые мы все изучали на уроках арифметики в школе, хотя иногда такой возможности в CSS не хватает. LESS исправляет данный недостаток CSS, так как язык LESS поддерживает простые арифметические операции.

Математические операции в LESS. Простая арифметика в LESS.

Все мы знаем арифметические операции с начальных классов школы, думаю, объяснять их не имеет смысла. Но в данной статье мы поговорим о том, для чего нужны математические операции в LESS, реализуем пример с использованием арифметических операторов и посмотрим результаты работы в браузере.

Для чего нужны математические операции в LESS

CSS препроцессор LESS поддерживает простые математические операции, тем самым LESS расширяет возможности CSS. Но, если с вложенными правилами и вложенными директивами было все понятно, то, возможно, не всё понятно с математическими операциями в LESS и с тем, как они расширяют возможности CSS.

Для начала перечислим математические операции в LESS:

1. Операция сложения. LESS использует оператор «+» для реализации данной операции.
2. Операция вычитания реализована в LESS оператором «-».
3. Операция деления реализована в LESS оператором «/».
4. Операция умножения в LESS реализована оператором «*».

Это простейшие математические операции, которые есть в любом языке программирования, но нет в CSS. Какие плюсы дадут математические операции в LESS CSS разработчику?

Как минимум, вам не нужно будет высчитывать ширину экрана, когда вы делаете адаптивный макет, вы можете использовать математические операции, а LESS будет высчитывать значения за вас, что бывает очень удобно. Арифметические операции в LESS могут быть применены к любому цвету, числу или LESS переменной.

Если тип данных значения не соответствует требованию LESS, то компилятор попытается преобразовать значение к числу или цвету. Если арифметическую операцию LESS применить к цвету, то можно получить значение, которое больше, чем FF, в этом случае LESS его округлит до FF. Теории хватит, думаю, все мы прекрасно знаем арифметику со школы, давайте посмотрим на примере арифметические операции в LESS.

Примеры математических операций в LESS

Ничего сложного придумывать мы не будем и попробуем поработать с размерами шрифтов, изменяя их при помощи математических операторов, которые есть в LESS. Давайте создадим простой HTML документ и сохраним его в папку nodejs. Если вы помните, то для установки LESS компилятора nodejs необходим:

Мы создали простую HTML страницу и задали для HTML параграфа один HTML атрибут class, хотя в данном случае это бессмысленно, так как параграф на странице будет один. Теперь давайте напишем код на LESS:

Сохраним файл в папку nodejs и назовем его style.less. Далее запустим less компилятор, выполнив в командной строке:

Код CSS файла будет таким:

Результат работы арифметических операций LESS

Мы сгенерировали файл CSS и теперь можем посмотреть, что получилось в браузере:

Результат работы математических операций LESS в браузере

Как видим, за счет того, что была использована арифметическая операция LESS, размер текста в HTML параграфе получился 36px. Правда в исходном коде мы использовали LESS переменную, о которой еще ничего не говорили, но скоро мы обязательно до них дойдем.

А теперь представьте: какие возможности вам дадут арифметические операции, если их использовать вместе с вложенными директивами и насколько быстрее вы сможете создавать адаптивные HTML страницы.