Знакомство с LESS

От автора: Возможно, вы уже сталкивались с понятием «CSS препроцессор», но не стали его изучать, потому что это показалось вам сложным или вы подумали, что придется изучить тонны нового синтаксиса. И хотя это и может оказаться правдой, вы все равно способны настроиться на нужный лад и очень легко начать пользоваться несколькими базовыми преимуществами чего-нибудь наподобие LESS.

Споры вокруг LESS и SASS никогда не смолкают, но вы просто возьмите и выберите один из них сегодня вечером и начните им пользоваться. Лично я начал использовать LESS, потому что на тот момент это было единственное, что поддерживалось фреймворком Bootstrap, а вы могли заметить, что я являюсь поклонником данного фреймворка. Я также заметил, что начать использовать LESS гораздо легче с помощью less.js.

Использование less.js

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

Для начала зайдите на сайт lesscss.org и скачайте less.js. После того как вы загрузите zip-архив, распакуйте его и поместите JavaScript файл в папку с вашим проектом, желательно в папку /js. Теперь откройте один из ваших HTML файлов и вставьте туда следующую строку:

Теперь ваша страница готова к компиляции LESS файлов. Далее вам необходимо добавить ссылку на ваш LESS файл в области head вашего документа. Убедитесь в том, что вы разметили ссылку до строки с less.js. Вы подключаете ваш LESS файл точно также как и обычный CSS файл за одним исключением. Убедитесь, что в атрибуте rel вы указали следующее rel=»stylesheet/less».

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

Переменные

Пожалуй, самое простое и полезное, что дает вам LESS, – это использование переменных. Для того чтобы объявить переменную в LESS, вам нужно написать символ @, а затем ключевое слово. Давайте объявим несколько переменных для цвета, в качестве примера:

Объявление имени переменной – это лишь первый шаг. Затем вам нужно каждой переменной присвоить значение. Давайте добавим несколько значений для цвета, используя шестнадцатеричную форму записи (hex).

Теперь, после объявления данных переменных, мы можем использовать их в любом месте нашей таблицы стилей. Убедитесь в том, что вы прописали переменные в самом верху таблицы стилей, до использования каких-либо селекторов, классов или идентификаторов (id). Хорошей идеей будет скопировать все переменные и поместить их в отдельную таблицу стилей, дав ей какое-нибудь название, например, lib.less (сокращенно от английского слова library – библиотека). Используйте правило импорт в самом верху таблицы стилей, чтобы включить таблицу с переменными.

Давайте вернемся непосредственно к применению переменных. Давайте зададим стили для базовых элементов body и a, используя переменные.

Я только что назначил для страницы белый фон и черный текст, ссылки будут синими, а при наведении – красными. Это довольно обыденное использование стилей, которое само по себе легко поддается изменению. Вы можете спросить себя: зачем мне нужно для этого использовать переменные? Давайте представим, что у вас есть таблица стилей, состоящая из 2, 000 строк кода, и вы указали красный цвет в формате hex в качестве значения 50 раз. Давайте также представим, что вы захотели выбрать более темный оттенок красного. В обычной CSS таблице вам бы пришлось просмотреть весь код и изменить все 50 значений. В LESS, все, что вам нужно сделать, – это изменить значение цвета у переменной, и цвет автоматически поменяется в тех местах, где была использована переменная. Если вы спросите меня, то я отвечу вам, что это потрясающе экономит ваше время. Управление цветами с помощью переменных можно считать базовой техникой. Давайте рассмотрим что-нибудь посложнее.

Управление свойствами margin и padding через переменные

Давайте использовать переменные для управления значениями полей (margins) и отступов (paddings). Есть пара причин в пользу этой идеи. Первая (такая же, как для цветов): если мы решим изменить значение, нам нужно это будет сделать только в одном месте. Вторая: гораздо легче добиться согласованности значений во всей таблице стилей с использованием переменных. Сколько раз вы завершали написание действительно длинной таблицы стилей, просматривали ее и видели, что значения для полей и отступов заданы вразброс? Если вы заботитесь о вертикальном выравнивании элементов на странице, то использование переменных может вам очень пригодиться. Давайте сначала объявим наши переменные.

Я буду использовать простое значение, например, 10px, с которым легко можно произвести умножение, деление, вычитание или сложение. Об этом чуть позже, а сейчас давайте назначим данные переменные для нашего селектора body.

Я только что добавил по 10px для полей и отступов у элемента body нашей страницы. Однако, сейчас я думаю, что лучше сделать отступ в 20px. Следует ли мне вернуться назад и изменить значение переменной? Нет, давайте используем оператор LESS, чтобы изменить значение «на лету». В качестве операторов используются символы сложения, вычитания, умножения или деления для вычислений с базовым значением переменной.

Просто возьмите значение в скобки и используйте простое математическое выражение для того чтобы добавить дополнительные десять пикселей. Здесь вы также можете использовать умножение:

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

Границы

Еще одно хорошее место, где можно применять переменные, – это свойство border. Вы можете объединить и использовать вместе сразу несколько значений переменных, точно также как вы используете вместе CSS значения. Сначала установим несколько переменных для границ.

Обратите внимание на то, что я использовал переменную в качестве значения для другой переменной. Это абсолютно нормально, и так даже рекомендуется делать. Делая так, вы создаете как бы модульную структуру вашей таблицы стилей, которую легче будет изменять в дальнейшем. Если вы измените значение переменной @black, то новое значение будет унаследовано всеми вашими CSS свойствами и элементами. Теперь применим эти переменные к селектору.

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

Если вы заинтересованы в том, чтобы узнать больше о создании тем для фреймворка Bootstrap с помощью LESS, тогда вам пригодится моя электронная книга Освоение фреймворка Bootstrap. Я посвятил целую главу использованию LESS при создании тем для Bootstrap.

Автор: Matt Lambert

Источник: //mattlambert.ca/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (3)