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

Знакомство с 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 файлов и вставьте туда следующую строку:

<script src="path-to/less.js" type="text/javascript"></script>

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

<link rel="stylesheet/less" href="path-to/styles.less">

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

Переменные

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

@blue
@red
@black
@white

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

@blue: #00f;
@red: #c00;
@black: #000;
@white: #fff;

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

@import "path-to/lib.less";

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

body {
  background: @white;
  color: @black;
}

a {
  color: @blue;
}

a:hover {
  color: @red;
}

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

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

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

@margin: 10px;
@padding: 10px;

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

body {
  background: @white;
  color: @black;
  margin: @margin;
  padding: @padding;
}

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

body {
  background: @white;
  color: @black;
  margin: @margin;
  padding: (@padding + 10);
}

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

padding: (@padding * 2);

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

padding: (@padding * 1.5);

Границы

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

@border-size: 1px;
@border-type: solid;
@border-color: @black;

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

.box {
  border: @border-size @border-type @border-color;
}

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

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

Автор: Matt Lambert

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

Комментарии Facebook:

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

  1. Вадим

    Стоит просмотреть более подробно, но уже интересно…

  2. Александр

    Мне кажется нужно более подробное описание возможностей. То, что описано в данной статье проще и привычнее делать при помощи старого доброго CSS. Ведь для освоения чего-то нового нужен толчек. НАпример что-то, что при помощи CSS сделать очень сложно или вовсе не реально, а на LESS — как раз, два. В данном случае этого не видно.

  3. dimadv7

    Может быть качественный курс сделаете, или мини-курс, было бы здорово) Такого еще в рунете нет, вроде бы!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree