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

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

Работа с встроенными функциями в LESS. Функции LESS.

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

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

CSS препроцессор LESS имеет встроенные функции, виды встроенных функций в LESS мы перечислим в завершении данной записи и далее отдельно рассмотрим примеры и назначения каждой встроенной функции в LESS. LESS расширяет возможности CSS за счет встроенных функций, тем самым упрощая написания CSS кода.

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

О том, что мы можем делать при помощи встроенных LESS функций, вы можете узнать в конце данной записи. Давайте попробуем поработать с встроенными функциями, чтобы понять какие плюсы они нам дают.

Пример использование встроенных функций LESS

В качестве примера попробуем изменить одни относительные единицы измерения CSS на другие при помощи встроенной функции LESS. Для начала давайте создадим простой HTML документ и сохраним его в папке nodejs (когда мы устанавливали LESS на Windows, мы говорили о том, что для работы компилятора LESS необходима платформа Nodej.s).

Довольно простая HTML страница, состоящая из одного параграфа и HTML заголовка. При помощи HTML тэга<meta> (специальный мета-тэг) мы указали кодировку HTML документа, чтобы символы на страницы отображались корректно и задали HTML атрибут lang, в котором указали язык документа.

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

Код на LESS довольно простой: сверху мы объявили две LESS переменные, позволяющие быстро изменить цвет текста и ширину. И воспользовались CSS селектором .myclass для оформления HTML параграфа. Теперь давайте сконвертируем LESS в CSS:

Код CSS несколько меньше кода LESS, но в данном случае это не показатель.

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

Рассмотренная встроенная LESS функция конвертирует единицы измерения в проценты, теперь наш абзац будет шириной 50% от области просмотра, а если бы он был вложенным в другой HTML элемент, то его ширина была 50% от ширины родительского HTML элемента. Давайте посмотрим на результат работы встроенной LESS функции percentage в браузере:

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

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

Виды встроенных функций LESS

LESS имеет множество встроенных функция, здесь мы только перечислим виды встроенных функций в LESS и дадим им короткое описание. Итак, список встроенных функций в LESS:

1. Функции для работы со строками в LESS или строковые функции LESS. Как понятно из названия, данные функции облегчают нам работу со строковыми значениями.
2. В LESS есть списки, которые чем-то похожи на массивы. Для работы со списками у LESS есть функции, которые позволяют управлять списками и получать характеристики списков. Не путайте списки LESS с HTML списками.
3. Помимо математических операторов в LESS есть еще и математические функции, которые позволяют производить относительно сложные вычисления.
4. В LESS есть типы данных и в LESS есть функции, работающие с типами данных, вернее, эти функции позволяют определить тип данных, который, например, хранится в переменной.
5. В LESS есть функции манипуляции цветом, которые позволяют производить различные манипуляции с цветами HTML элементов.
6. В LESS есть функции, позволяющие производить манипуляции с альфа-каналом цвета в CSS.
7. В LESS есть функции, которые позволяют смешивать цвета.
8. Так же в LESS можно выделить разные функции, которые нельзя отнести ни к одной из вышеперечисленных групп.