Мои впечатления от использования LESS

Во процессе изучения LESS, я пользовался информацией с официального сайта и книгой Басса Джобсена под названием “LESS Web Development Essentials”, которую вы без труда сможете найти и скачать, воспользовавшись Яндексом.

Как же начать использовать LESS в своем проекте? На самом деле нет ничего сложного. Создайте текстовый файл с расширением .less – а в нем будет храниться LESS-код вашего проекта. Как известно, для использования на странице LESS необходимо скомпилировать в CSS. Сделать это можно несколькими способами, в зависимости от того, какой будет более удобен для вас.

1. Использовать less.js. Скачиваем его с GitHub. Подключаем файл с LESS-кодом и файл less.js, и при каждом обращении к странице будет происходить компиляция
2. Использовать командную строку. Для этого нужно:
   • Скачать и установить Node.js для Windows или своей ОС
   • Скачать less.js с GitHub
   • Распаковать архив к себе на компьютер в любую удобную папку и добавить эту папку в переменную PATH

     Использовать для компиляции команду:

     >lessc path_to_less\source.less path_to_css\output.css

     Для просмотра справки используется следующая команда:

     >lessc –h

3. Использовать онлайн-компилятор. Например, http://less2css.org/ или http://lesstester.com/.
4. Воспользоваться программой с графическим интерфейсом. Существуют программы для различных операционных систем. Например, для Windows – SimpLESS, OSx – CodeKit, Linux – Plessc

Мне больше всего понравился четвертый способ, я как пользователь Windows, установил программу SimpLESS. После установки и запуска программы необходимо указать ей где находятся LESS-файл, который нужно компилировать и CSS-файл, в который нужно поместить скомпилированный код и все. При каждом изменении LESS-файла программа будет производить компиляцию. В коде страницы в этом случае нужно будет подключать файл CSS.

Также существуют редакторы, в которых можно писать код LESS, например, Crunch. Его не обязательно специально устанавливать для работы с LESS, потому что для всех популярных редакторов кода (например, Eclipse, Sublime Text, Dreamweaver) существуют плагины. Я, например, использую в основном Notepad++. Для него можно скачать xml-файл с настройками для подсветки синтаксиса LESS.

Итак, переходим к возможностям LESS

На мой взгляд самой интересной и функциональной «фишкой» LESS являются «примеси» (mixins). Они похожи на функции в языках программирования. Передавая в них параметры, в результате их работы мы получаем CSS-код со значениями переданных параметров. Например, код самой простой «примеси»:

LESS

.border-radius (@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
  
/*Вызов*/
.somediv {
    .border-radius(20px);
} 

Результат:

CSS

.somediv {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

Аргументы могут содержать значения по-умолчанию (@radius:10px). Кроме того, существует специальная переменная @arguments, через которую доступны все значения, передаваемы в «примесь». Пример:

LESS

.setmargin(@top:10px; @right:10px; @botttom:10px; @left:10px;){
   margin:@arguments;
}
/*Вызов*/
p {.setmargin();}

Результат:

CSS

p {margin: 10px 10px 10px 10px;}

Совместно с «примесями» можно использовать условия (guards). Можно использовать несколько условий одновременно. Условия (guards) служат для предотвращения дублирования «примесей». В зависимости от выполнения условия, выводится определенный код. Внутри условий можно использовать встроенные функции LESS.

LESS

mixin(@a) when (@<1){
 color: white;
}
mixin(@a) when (@>=1){
 color: black;
}
.class { mixin(0);}
.class2 { mixin(1);}

Результат:

CSS

.class{color: white;}
.class2{color: black;}

В LESS существует возможность вызывать примеси(mixins) несколько раз в зависимости от выполнения условия. Таким способом организуются циклы (loops). Приведу пример:

LESS

.setbackground(@number) when (@number>0){
   .setbackground(@number-1);
  .class@{number} {background-image: ~"url(backgroundimage-@{number}.png)";}
}
/*Вызов*/
.setbackground(10)

Результат:

CSS

.class1{background-image: url(backgroundimage-1.png);}
.class2{background-image: url(backgroundimage-2.png);}
…
.class10{background-image: url(backgroundimage-10.png);}

Если вы решите создать свою собственную «сетку» для макета веб-страницы, например, такую, как “960 grid system” (http://960.gs/), то без использования циклов (loops) вам будет сложно обойтись. Циклы очень помогут вам в этом случае для генерации CSS-кода «сетки».

LESS

.make-grid-classes(@number) when (@number>0) {    
    .make-grid-classes(@number - 1);
    .col-@{number} {
          #preboot > .make-column(@number);
    }
}
/*Вызов*/
.make-grid-classes(12);

«Примеси» можно размещать в своих «пространствах имен» (namespaces). Вообще-то в «пространствах имен» можно размещать не только «примеси», но и остальной LESS-код, даже тот которых находится совершенно в другом файле.

Примеры:

LESS

#namespace{
  .nav(){
     li{
       width:100%;
     }
  }
}
#sidebar{
  ul{
   #namespace > .nav;
  }
}

Результат:

CSS

#sidebar ul li{
  width:100%;
}

LESS

#preboot { @import "preboot-master/less/preboot.less"; } //preboot

Чтобы использовать «примеси» (mixins) необязательно их самостоятельно писать. В сети существует множество сайтов, где можно скачать уже готовые библиотеки «примесей» (mixins).

• Less Elements
• Less Hat
• 3L
• ClearLess
• Preboot

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

Ну что, c примесями немного разобрались, теперь можно перейти к другой, не менее полезной возможности LESS - вложенным правилам (Nested rules).

Вложенные правила - очень полезная возможность писать CSS–код для дочерних элементов какого-нибудь элемента html-страницы, основываясь на контексте. То есть в результате компиляции LESS-кода, у нас получится набор CSS-правил, основанный на контекстных селекторах.

Пример:

LESS

.res-links{
	li{
	  border-bottom:1px dashed #b79c56; font-size:12px;padding-bottom:5px; margin-bottom:5px;
	  a{color:#464646;}
	  &:before{content:"→";padding-right:5px;}
	}
}

Результат:

CSS

.res-links li {
  border-bottom: 1px dashed #b79c56;
  font-size: 12px;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.res-links li a {
  color: #464646;
}
.res-links li:before {
  content: "→";
  padding-right: 5px;
}

Во вложенных правилах можно писать код для псевдо-классов и псевдо-элементов. Как в морем примере, я написал правила для псевдо-элемента :before элемента li. Для того, чтобы обращаться к псевдо-элементам и псевдо-классам в коде LESS, нужно использовать символ “&”.

На что же еще можно обратить внимание при изучении LESS? Конечно же на функции. LESS содержит большое количество встроенных функций. Встроенные функции можно применять для различных операций над данными внутри «примесей», а также условных выражений. В LESS функции сгруппированы по типам. Существуют математические функции, строковые функции, функции для проверки типов данных, функции для работы с цветом и многие другие. Все функции LESS полезны и могут пригодиться в процессе разработки, но особенно интересны функции для работы с цветом. Подробнее с ними вы можете ознакомиться на официальном сайте LESS в разделе “Function Reference”, здесь же я приведу лишь пару из них.

• Функция saturate() - увеличивает насыщенность цвета, переданного в качестве первого аргумента на значение, переданного в качестве второго аргумента (1-100);
• Функция darken()- изменяет значение цвета, делая его темнее. Принимает 2 аргумента: первый – цвет, второе – значение в процентах (1-100) на сколько нужно затемнить цвет;
• Функция >lighten() – работает аналогично функции darken(), но только наоборот, делает цвет, переданный в первом аргументе светлее, на значение в процентах (1-100), переданное во втором аргументе.

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

Вывод.

На мой взгляд LESS очень помогает при работе над крупными проектами, использующими большое количество CSS-кода. Этот инструмент позволяет оптимизировать работу веб-разработчика, позволяя ему писать меньшее количество кода, чем при использовании обычного CSS, но при создании небольших сайтов вполне можно обойтись и без него.

В процессе изучения, я сверстал пару страничек с использованием LESS, с которыми вы можете ознакомиться при желании.

Демо-страничка 1, Демо-страничка 2