LESS CSS — Руководство для начинающих

Всем привет. Решил немного отвлечься от создания интернет-магазинов 🙂 и написать статью по теме веб-дизайна. Очень часто при создание сайта приходится работать c каскадными таблицами стилей (CSS). Они облегчают изменение визуального оформления сайта, однако как и любая технология имею свои ограничения, в частности когда речь заходит об обслуживание. Если у нас есть тысячи строк стилей и несколько отдельных CSS-файлов, то поддерживать все это хозяйство будет довольно проблематично.Less CSS - Динамический язык стилевой разметки

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

Редактор LESS

На момент написания, единственный редактор,который предназначен специально для редактирования LESS-файлов — это ChrunchApp. Это приложение построено на Adobe Air, оно является кросс-платформенным, так что вы можете запустить его на Windows, Mac OS X и Linux. Для тех, кто никогда не сталкивался с Adobу Air — это такая среда исполнения веб-приложений (ссылка), в которой эти самые приложения и работают. Что-то типо Java-машины от Adobe 🙂Редактор LESS

Для других редакторов (Dreamweaver, Coda, NotePad++ и SublimeText 2) существуют плагины или пакеты, которые позволяют включить подсветку формата LESS. Вот несколько ссылок, чтобы сделать это (внимание, статьи на английском):

Использование LESS

Использовать LESS очень просто. Нам только нужно добавить две строки в тег <head> нашего HTML-документа. Сначала подключается .less файл, а после less.js библиотека, которую вы можете скачать на официальном сайте.

<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less.js" type="text/javascript"></script>

Однако этот вариант хорошо подходит только для разработки, на боевом проекте лишняя операция по конвертации .less файла будет отнимать время, поэтому лучше скомпилировать .less файл в .css. Для компиляции вы можете использовать WinLESS для Windows или LESS.App для Mac. Делается это просто:

  • ставите выбранную программу
  • указываете путь к .less файлу
  • компилируете
  • добавляете получившийся .css файл в свой проект
<link rel="stylesheet/css" type="text/css" href="style.css">

Синтаксис LESS

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

Переменные

Прежде всего давайте посмотрим на переменные.

Если вы давно работаете с CSS, вы наверное довольно часто пишите что-то вроде этого, где повторяющиеся значения назначены нескольким блокам в таблице стилей

.class1 {
 background-color: #2d5e8b;
}
.class2 {
 background-color: #fff;
 color: #2d5e8b;
}
.class3 {
 border: 1px solid #2d5e8b;
}

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

Если мы используем CSS-препроцессор, такой как LESS, у нас нет такой проблемы, так как мы можем использовать переменные. Переменные позволяют нам сохранить значение в константу, которую позже можно будет использовать в таблице стилей.

@color-base: #2d5e8b;

.class1 {
 background-color: @color-base;
}
.class2 {
 background-color: #fff;
 color: @color-base;
}
.class3 {
 border: 1px solid @color-base;
}

В приведенном выше примере мы сохранили цвет #2d5e8b в переменную @color-base. Теперь, если нам захочется изменить цвет, достаточно изменить только одну переменную.

Вы также можете поместить другие значения в переменные, как в примерах ниже:

@font-family: Georgia
@dot-border: dotted
@transition: linear
@opacity: 0.5

Примешивания (Mixins)

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

.gradients {
 background: #eaeaea;
 background: linear-gradient(top, #eaeaea, #cccccc);
 background: -o-linear-gradient(top, #eaeaea, #cccccc);
 background: -ms-linear-gradient(top, #eaeaea, #cccccc);
 background: -moz-linear-gradient(top, #eaeaea, #cccccc);
 background: -webkit-linear-gradient(top, #eaeaea, #cccccc);
}

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

div {
 .gradients;
 border: 1px solid #555;
 border-radius: 3px;
}

Наш div будет наследовать все свойства из .gradients Таким образом наш код на LESS эквивалентен следующему на чистом CSS

div {
 background: #eaeaea;
 background: linear-gradient(top, #eaeaea, #cccccc);
 background: -o-linear-gradient(top, #eaeaea, #cccccc);
 background: -ms-linear-gradient(top, #eaeaea, #cccccc);
 background: -moz-linear-gradient(top, #eaeaea, #cccccc);
 background: -webkit-linear-gradient(top, #eaeaea, #cccccc);
 border: 1px solid #555;
 border-radius: 3px;
}

Если вы используете CSS3 в своих проектах. вы можете использовать LESS Elements, чтобы сделать свою работу более простой. LESS Elements представляет собой набор общих CSS3 примешиваний (mixins), которые часто используются в таблицах стилей (border-radius, gradients, drop-shadow и другие).

Чтобы использовать LESS Elements, просто добавьте правило @import в вашу таблицу стилей LESS, но не забудьте сначала скачать и добавить в свой рабочий каталог.

@import "elements.less";

После этого мы сможем использовать все классы из elements.less, например, чтобы добавить border-radius: 3px мы можем написать:

div {
 .rounded(3px);
}

Более подробно о доступных функциях можно прочитать в документации.

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

Вложеные правила

Часто, когда вы пишите на простом CSS, вы можете работать со следующими структурами кода

nav {
 height: 40px;
 width: 100%;
 background: #455868;
 border-bottom: 2px solid #283744;
}
nav li {
 width: 600px;
 height: 40px;
}
nav li a {
 color: #fff;
 line-height: 40px;
 text-shadow: 1px 1px 0px #283744;
}

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

nav {
     height: 40px;
     width: 100%;
     background: #455868;
     border-bottom: 2px solid #283744;
     li {
         width: 600px;
         height: 40px;
         a {
             color: #fff;
             line-height: 40px;
             text-shadow: 1px 1px 0px #283744;
         }
     }
}

Вы также можете назначить правило псевдоклассу, такому, как :hover. Для этого достаточно добавить символ & перед псевдоклассом. Чтобы добавить правила для значения ссылки при наведении мы можем написать так:

a {
     color: #fff;
     line-height: 40px;
     text-shadow: 1px 1px 0px #283744;
     &:hover {
         background-color: #000;
         color: #fff;
     }
}

Операции

Мы можем выполнять арифметические операции в LESS, можно сделать что-то вроде сложения вычитания, умножения или деления на число цвета или значения в таблице стилей.

Скажем мы хотим сделать Элемент B в два раза выше, чем Элемента А, в таком случае мы можем записать это так:

@height: 100px

.element-A {
 height: @height;
}
.element-B {
 height: @height * 2;
}

Как вы видите, мы сначала сохраняем значение в переменной @height, а затем присваиваем его для элемента А.

Для элемента B нам не обязательно рассчитывать высоту, мы можем использовать оператор умножения звездочка (*). Теперь, если мы изменим значения высоты для элемента А, значения для элемента B изменится автоматически. Очень удобное свойство, позволяющее легко менять размеры элементов, не боясь нарушить пропорции.

Зоны видимости

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

header {
     @color: black;
     background-color: @color;
     nav {
          @color: blue;
          background-color: @color;
          a {
              color: @color;
          }
     }
}

В этом пример хедер будет иметь черный цвет фона, а элемент nav голубой. Ссылка тоже будет голубого цвета, т.к. она является потомком элемента nav.

Заключение

LESS является лишь одним из CSS-препроцессоров, вы также можете попробовать SASS или Stylus, о которых я также планирую рассказать в одном из следующих постов. Также его возможности не ограничиваются данной статьей, вы можете прочитать про другие на официальном сайте проекта (ссылка ниже).

Почему я стал использовать LESS? — Потому что в своих проектах, я использую Twitter Bootstrap, который написан с его использованием.

Несколько полезных ссылок:

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

Буду рад отзывам и предложениям, если вас интересуют другие статьи на тему веб-дизайна напишите об этом в комментариях. Всем удачи и не забываем подписываться на мой блог (форма для подписи ниже или в правой колонке).

Tschüss!

  • Женя Колесов

    С интересом прочитал. Правда я чайник…
    Я вот установил тему на друпал. Fusion.
    Она вся белая.. Вдимо её с помощью CSS надо раскрашивать?
    Не могли бы вы в общих чертах описать, как это делается?
    Я попробовал в .info файл добавить ссылку на собственный .css
    А в настройках блоков прописал стили из этого своего css.
    В принципе получилось. Вот просто я подумал что у вас возможно есть больше «советов», как все это раскрасить…

    • antonchikov

      Можно так, а можно и css самой темы менять. На сайте темы fusion есть подробный мануал как это делать. Постараюсь создание темы для Drupal освятить в отдельном уроке.

  • Pingback: Как выбрать правильный CSS Препроцессор для создания сайтов | Блог Чикова Антона()

  • Спасибо за статью!

  • Janissa

    Назрел тупой вопрос: зачем создавать пустой .less, компилить его в .css, если можно сразу создать .css? Как после компиляции браузер будет понимать что это .less? Как он будет догадываться о связи с библиотекой less?
    Компилировать надо .. когда? В самом начале при создании всех файлов? Каждый раз при изменении style.сss? Зачем тогда нам пустой файл .less?

    • А зачем браузеру понимать less? Браузер будет понимать css, который вы скомпилируете из less. Это же препроцессор

  • Pingback: Less — быстрый старт |()

  • Pingback: Быстрый старт()

  • Виктор Шамаков

    Прекрасная статья! Все четко, лаконично изложено и главное по делу, прочитал с удовольствием, буду осваивать препроцессоры css. С удовольствием бы прочитал статьи про другие препроцессоры

  • Александр Москаленко

    Я так понимаю перед продакшином .less нужно скомпилировать в .css? И по сути нет ничего особенного. Грубо говоря препроцессор помогает грамотно скомпилировать все в тот же css, который в ином случае пришлось бы писать самому.

  • Rada A

    Спасибо, добрый человек, наконец-то стало понятно!