Саша Бизиков

Младший дизайнер в ФанБоксе. Делал интерфейсы бизнес-процессов для сотрудников банка Тинькофф. Изучаю дизайн мобильных приложений и редактуру текста.

Что такое LESS и как его использовать

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

LESS — это надстройка над CSS. LESS — это программируемый CSS. LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания и операции.

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

Как перейти на LESS?

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

После того, как стили сконвертированы в LESS, создаем соответствующий файл с расширением .less, например style.less.

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

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

Если вы используете среду разработки IDEA, то советую использовать плагин. При потере фокуса программы less будет компилироваться в css, это очень удобно 🙂

Когда есть понимание того, как работать с LESS, можно переходить к основным возможностям языка, ради которого стоит его использовать:

Переменные

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

LESS
@color: #4D926F;
    #header {
      color: @color;
    }
    h2 {
      color: @color;
    }
CSS
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Mixins (примешивания) позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.

LESS
.box-sizing(@a: border-box) {
  box-sizing: @a;
  -webkit-box-sizing: @a;
  -moz-box-sizing: @a;
}
.wrapper{
  .box-sizing;
}
CSS
.wrapper{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

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

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

LESS
.content {
a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
CSS
.content a {
  text-decoration: none;
}
.content a:hover {
  text-decoration: underline;
}

Операции

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

LESS
@width: 960px;
.content {
   width: @width * 2/3;
}
.sidebar{
   width: @width / 3;
}
CSS
.content{
   width: 640px;
}
.sidebar{
   width: 320px;
}

Вывод

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

Ещё