less_css

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

Технология Less является практически полной копией CSS с небольшими надстройками, позволяющими упорядочить структуру кода, сделать его более гибким и легко поддерживаемым. Сайт авторовhttp://lesscss.org.

Для того чтобы использовать Less в своем проекте, необходимо подключить к HTMLфайлу файл с данной библиотекой в формате JavaScript. Вот ссылка на этот файлhttps://raw.github.com/less/less.js/v2.5.1/dist/less.min.js. В элементе head HTMLстраницы сначала необходимо прописать путь к стилевому файлу Less:

Затем нужно прописать путь к библиотеке Less:

Не забудьте поместить все эти файлы в одну папку.

После завершения приготовлений можно приступать к обзору основных возможностей Less.

1. Использование переменных. Переменная создается следующим образом@variable_name: 1px. Символ @ говорит препроцессору о том, что он имеет дело именно с переменной. 1pxэто текущее значение переменной (кстати, это значение впоследствии не может быть изменено). Использовать данную переменную можно, к примеру, так

Вместо имени подставится значение, указанное выше (то есть 1 px). Преимущество использования переменных очевидноможно присваивать одно и тоже значение неограниченное количество раз, не занимаясь при этом копипастом. Чтобы поменять значения во всех местах сразу, достаточно изменить значение переменной в одном месте. Помимо пикселей в переменной могут храниться цвета, имена шрифтов и многое другое.

2. Использование вложенных стилей. При записи стилей для сложных контекстных селекторов конечный CSSфайл может разрастись до очень больших размеров и утратить читабельность. Вложенные стили позволяют прописывать правила для тех или иных тегов прямо внутри правил других элементов, располагающихся в HTMLкоде уровнем выше. Допустим, у нас есть следующий HTMLкод:

(параграф внутри какогото блока). В CSS мы сначала пропишем правила для div{}, а потом для div p{} (параграфа внутри div). Less позволяет нам поступить вот так:

При этом уровень вложенности не ограничен. Как мы видим, в итоге получается очень понятная и упорядоченная структура.

3. Использование примесей. Примесьэто некий абстрактный класс, который создается и используется исключительно в CSSкоде (в HTML его нет). Пример примеси.mixed{правила}. В правилах можно прописать все, что угодноцвета, отступы, закругления, размеры и т.д. Созданную примесь можно присваивать в качестве обычного правила любому селектору. Выглядеть это будет приблизительно так:

Все правила, прописанные в mixed, автоматически подставятся в div. Примесь может принимать произвольное количество параметров (по аналогии с функциями в программировании). Пример:

В данном случае в качестве параметра принимается переменная @color (подразумевается, что она содержит в себе какойто цвет). В теле примеси происходит присвоение переданного цвета основному цвету текста:

Блоку div в качестве одного из правил мы добавляем нашу примесь и передаем параметром нужный цвет (#f64). Нетрудно догадаться, что другому блоку можно передать другой цвет. Количество параметров не ограничено.