CSS классы и идентификаторы CSS. CSS селекторы
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Я продолжаю рубрику…
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я продолжаю рубрику: Верстка сайтов и ее раздел Препроцессор 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).
[php]
<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>
[/php]
Довольно простая HTML страница, состоящая из одного параграфа и HTML заголовка. При помощи HTML тэга<meta> (специальный мета-тэг) мы указали кодировку HTML документа, чтобы символы на страницы отображались корректно и задали HTML атрибут lang, в котором указали язык документа.
Теперь давайте напишем код на LESS, который будет использовать встроенную функцию, которая конвертирует единицы измерения.
[php]
@color: #FF0099;
@width:0.5;
.myclass{
color: @color;
width: percentage (@width);
}
[/php]
Код на LESS довольно простой: сверху мы объявили две LESS переменные, позволяющие быстро изменить цвет текста и ширину. И воспользовались CSS селектором .myclass для оформления HTML параграфа. Теперь давайте сконвертируем LESS в CSS:
[php]
.myclass {
color: #FF0099;
width: 50%;
}
[/php]
Код CSS несколько меньше кода LESS, но в данном случае это не показатель.
Рассмотренная встроенная LESS функция конвертирует единицы измерения в проценты, теперь наш абзац будет шириной 50% от области просмотра, а если бы он был вложенным в другой HTML элемент, то его ширина была 50% от ширины родительского HTML элемента. Давайте посмотрим на результат работы встроенной LESS функции percentage в браузере:
Довольно неплохо, если непонятно, чем встроенные функции в LESS облегчают написание CSS кода, то представьте, что у вас есть большая таблица стилей, в которой много правил для похожих HTML элементов, насколько быстрее у вас получится вносить изменения с LESS?
LESS имеет множество встроенных функция, здесь мы только перечислим виды встроенных функций в LESS и дадим им короткое описание. Итак, список встроенных функций в LESS:
Выберете удобный для себя способ, чтобы оставить комментарий