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

Математические операции в LESS. Простая арифметика в LESS.
Все мы знаем арифметические операции с начальных классов школы, думаю, объяснять их не имеет смысла. Но в данной статье мы поговорим о том, для чего нужны математические операции в LESS, реализуем пример с использованием арифметических операторов и посмотрим результаты работы в браузере.
Для чего нужны математические операции в LESS
CSS препроцессор LESS поддерживает простые математические операции, тем самым LESS расширяет возможности CSS. Но, если с вложенными правилами и вложенными директивами было все понятно, то, возможно, не всё понятно с математическими операциями в LESS и с тем, как они расширяют возможности CSS.
Для начала перечислим математические операции в LESS:
- Операция сложения. LESS использует оператор «+» для реализации данной операции.
- Операция вычитания реализована в LESS оператором «-».
- Операция деления реализована в LESS оператором «/».
- Операция умножения в LESS реализована оператором «*».
Это простейшие математические операции, которые есть в любом языке программирования, но нет в CSS. Какие плюсы дадут математические операции в LESS CSS разработчику?
Как минимум, вам не нужно будет высчитывать ширину экрана, когда вы делаете адаптивный макет, вы можете использовать математические операции, а LESS будет высчитывать значения за вас, что бывает очень удобно. Арифметические операции в LESS могут быть применены к любому цвету, числу или LESS переменной.
Если тип данных значения не соответствует требованию LESS, то компилятор попытается преобразовать значение к числу или цвету. Если арифметическую операцию LESS применить к цвету, то можно получить значение, которое больше, чем FF, в этом случае LESS его округлит до FF. Теории хватит, думаю, все мы прекрасно знаем арифметику со школы, давайте посмотрим на примере арифметические операции в LESS.
Примеры математических операций в LESS
Ничего сложного придумывать мы не будем и попробуем поработать с размерами шрифтов, изменяя их при помощи математических операторов, которые есть в LESS. Давайте создадим простой HTML документ и сохраним его в папку nodejs. Если вы помните, то для установки LESS компилятора nodejs необходим:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
|
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <title>Пример арифметики в LESS</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Пример арифметики в LESS</h1> <pclass="math">Размер этого текста высчитал LESS компилятор</p> </body> </html> |
Мы создали простую HTML страницу и задали для HTML параграфа один HTML атрибут class, хотя в данном случае это бессмысленно, так как параграф на странице будет один. Теперь давайте напишем код на LESS:
|
@fontSize: 18px; .math { font-size: @fontSize * 2; color:red; } |
Сохраним файл в папку nodejs и назовем его style.less. Далее запустим less компилятор, выполнив в командной строке:
|
lessc style.less style.css |
Код CSS файла будет таким:
|
.math{ font-size: 36px; color: red; } |
Результат работы арифметических операций LESS
Мы сгенерировали файл CSS и теперь можем посмотреть, что получилось в браузере:

Результат работы математических операций LESS в браузере
Как видим, за счет того, что была использована арифметическая операция LESS, размер текста в HTML параграфе получился 36px. Правда в исходном коде мы использовали LESS переменную, о которой еще ничего не говорили, но скоро мы обязательно до них дойдем.
А теперь представьте: какие возможности вам дадут арифметические операции, если их использовать вместе с вложенными директивами и насколько быстрее вы сможете создавать адаптивные HTML страницы.
Здравствуйте!
Когда у вас продолжение про LESS будет уж очень понятно и доступно объясняете, даже на ваш блог недавно подписалась! 🙂 Чудом его нашла... И столько полезного для себя
В рубрике LESS стараюсь публиковать что-то новое раз в два-четыре дня.
В LESS можно делать более сложные математические операции и расчеты? Если да, то как? А то плюс, минус, разделить, умножить — маловато будет.
Да, можно, в LESS есть встроенные математические функции. О них я пока не писал и писать буду только по завершении рубрики препроцессор LESS, поэтому для ознакомления рекомендую вам обратиться к документации LESS.