Непосредственное форматирование текста в HTML
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я продолжаю рубрику: Верстка сайтов и ее раздел Препроцессор LESS. В этой записи мы поговорим о том, как работают встроенные функции в LESS. Отметим, что LESS имеет достаточно много встроенных функций и рассматривать их все в данной записи мы не будем. Цель данной записи заключается в том, чтобы объяснить, как использовать встроенные функции в LESS и чем они облегчают работу верстальщика.
Работа с встроенными функциями в LESS. Функции LESS.
Из записи вы узнаете: для чего нужны встроенные функции в LESS, попробуете на примере воспользоваться теми преимуществами, которые дают встроенные функции и в завершении увидите результат работы встроенных LESS функций в браузере.
Содержание статьи:
CSS препроцессор LESS имеет встроенные функции, виды встроенных функций в LESS мы перечислим в завершении данной записи и далее отдельно рассмотрим примеры и назначения каждой встроенной функции в LESS. LESS расширяет возможности CSS за счет встроенных функций, тем самым упрощая написания CSS кода.
Встроенных функций в LESS довольно много, и у LESS есть довольно подробная техническая документация, которая описывает каждую функцию, правда на английском языке. LESS довольно гибкий язык, мы легко можем комбинировать различные его расширения, используя вместе вложенные правила и вложенные директивы при этом для вычисления значений CSS свойств мы можем использовать арифметические операторы в LESS.
О том, что мы можем делать при помощи встроенных LESS функций, вы можете узнать в конце данной записи. Давайте попробуем поработать с встроенными функциями, чтобы понять какие плюсы они нам дают.
В качестве примера попробуем изменить одни относительные единицы измерения CSS на другие при помощи встроенной функции LESS. Для начала давайте создадим простой HTML документ и сохраним его в папке nodejs (когда мы устанавливали LESS на Windows, мы говорили о том, что для работы компилятора LESS необходима платформа Nodej.s).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> <p class="myclass">В этом примере мы будем конвертировать относительные единицы измерения.</p> </body> </html> |
Довольно простая HTML страница, состоящая из одного параграфа и HTML заголовка. При помощи HTML тэга<meta> (специальный мета-тэг) мы указали кодировку HTML документа, чтобы символы на страницы отображались корректно и задали HTML атрибут lang, в котором указали язык документа.
Теперь давайте напишем код на LESS, который будет использовать встроенную функцию, которая конвертирует единицы измерения.
1 2 3 4 5 6 7 8 9 10 11 |
@color: #FF0099; @width:0.5; .myclass{ color: @color; width: percentage(@width); } |
Код на LESS довольно простой: сверху мы объявили две LESS переменные, позволяющие быстро изменить цвет текста и ширину. И воспользовались CSS селектором .myclass для оформления HTML параграфа. Теперь давайте сконвертируем LESS в CSS:
1 2 3 4 5 6 7 |
.myclass { color: #FF0099; width: 50%; } |
Код CSS несколько меньше кода LESS, но в данном случае это не показатель.
Рассмотренная встроенная LESS функция конвертирует единицы измерения в проценты, теперь наш абзац будет шириной 50% от области просмотра, а если бы он был вложенным в другой HTML элемент, то его ширина была 50% от ширины родительского HTML элемента. Давайте посмотрим на результат работы встроенной LESS функции percentage в браузере:
Результаты работы встроенных функций LESS в браузере
Довольно неплохо, если непонятно, чем встроенные функции в LESS облегчают написание CSS кода, то представьте, что у вас есть большая таблица стилей, в которой много правил для похожих HTML элементов, насколько быстрее у вас получится вносить изменения с LESS?
LESS имеет множество встроенных функция, здесь мы только перечислим виды встроенных функций в LESS и дадим им короткое описание. Итак, список встроенных функций в LESS:
Выберете удобный для себя способ, чтобы оставить комментарий