Препроцессор less: что это такое и с чем его едят

Мы все знаем, что CSS может быть немного неприятно писать, особенно когда речь идет о серьезных проектах с тысячами строк кода. В конечном итоге Вы вынуждены повсюду дублировать одни и те же стили и использовать поиск и замену Вашего редактора или IDE при каждом изменении цвета. Работа с большим файлом на чистом css – это кропотливый и, главное, совсем не творческий процесс, в котором слишком легко упустить важную деталь и ошибиться. Но все это до тех пор, пока Вы не начинаете использовать препроцессор.

К счастью, сообщество веб-разработчиков решило проблему громоздких css-файлов с уймой повторяющихся блоков стилей. Теперь у нас есть CSS-препроцессоры, такие как Less, Sass и Scss. Они дают нам ряд преимуществ по сравнению с простым CSS:

• Переменные, чтобы Вы могли определять и легко изменять значения во всем файле стилей. (Это когда-нибудь появится и в CSS);
• Динамически рассчитанные значения. (В CSS мы имеем calc, но это только для единиц длины);
• Миксины, которые позволяют Вам повторно использовать и комбинировать стили. Они даже поддерживают передачу аргументов.

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

Инструментарий для работы с препроцессором less

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

Рекомендуемый способ - заранее скомпилировать Ваши написанные на less стили в обычные стили css и в таком виде подключать их к Вашей веб-странице. Существует ряд бесплатных графических утилит, которые могут скомпилировать файлы .less: можно воспользоваться сборщиками проектов, такими как webpack или gulp, многие IDE также отлично справляются с компиляцией less-файлов, но давайте рассмотрим в этой статье способ с использованием node.js, который не требует ни мощной IDE, ни установки лишних программ.

Если у Вас установлена node (а она у Вас установлена, раз Вы занимаетесь веб-разработкой) и Вы знаете, что такое терминал, откройте его и установите через него Less, используя следующую команду NPM:

npm install –g less

Это даст Вам доступ к команде less из любого открытого терминала, что позволит Вам скомпилировать Ваши файлы .less в обычный CSS в абсолютно любой директории на устройстве. Вот единственная необходимая команда для компиляции less-файла в css-файл:

lessc styles.less styles.css

После того как Вы скомпилировали css-файл, подключите его к html-файлу. Если в процессе компиляции произошла ошибка, она отобразится в Вашем терминале.

Работа с переменными в препроцессоре less

Одной из основных особенностей Less является возможность создавать переменные также, как и в стандартном языке программирования. Они могут хранить любые типы значений, которые Вы часто используете: цвета, размеры, селекторы, имена шрифтов, URL-адреса и так далее. Философия less заключается в повторном использовании синтаксиса CSS, где это возможно.

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

@background-color: #222222;
@text-color: #DD4814; 
p {  
  background-color: @background-color;
  color: @text-color;
} 
div.my-class {
  background-color: @background-color;
}
h2 {
  color: @text-color;
}

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

Работа с миксинами в препроцессоре less

Less позволяет нам использовать существующий класс или идентификаторы и применять все его стили непосредственно к другому селектору. Следующий пример прояснит ситуацию:

#circle {
  background-color: #DD4814;
  border-radius: 100%;
} 
#small-circle {
  width: 20px;
  height: 20px;
  #circle
} 
#big-circle {
  width: 200px;
  height: 200px;
  #circle
}

Если Вы не хотите, чтобы миксин появлялся в скомпилированном CSS, Вы можете поместить скобки после него:

#circle(){
  background-color: #DD4814;
  border-radius: 100%;
} 
#small-circle {
  width: 20px;
  height: 20px;
  #circle
} 
#big-circle {
  width: 200px;
  height: 200px;
  #circle
}

Еще одна крутая вещь, которую могут делать Mixins - это получать параметры. В следующем примере мы добавляем аргумент для ширины и высоты наших кругов со значением по умолчанию 20 пикселей. Это создаст маленький круг 20x20 и большой 200x200 пикселей.

#circle(@size: 20px){
  background-color: #DD4814;
  border-radius: 100%;
   width: @size;
  height: @size;
} 
#small-circle {
  #circle
} 
#big-circle {
  #circle(200px)
}

Работа с вложенностью в препроцессоре less

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

ul {
  background-color: #222222;
  padding: 0 15px;
  list-style: none;
   li {
    background-color: #fff;
    margin: 10px 0;
  }
}

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

В следующем примере после компиляции в CSS наш li будет иметь текст белого цвета, так как в правилах ul мы предварительно определили strong > @ text-color.

@text-color: #000000;
ul {
  @text-color: #fff;
  background-color: #222222;
  padding: 0 15px;
  list-style: none;
   li {
    color: @text-color;
    margin: 10px 0;
  }
}

Работа с функциями в препроцессоре less

В Less также есть функции! Он начинает все больше и больше походить на язык программирования, а не «таблицу разметки стилей», не так ли?

Давайте посмотрим на функцию fadeout, которая увеличивает прозрачность цвета.

@var: #DD4814;
div {
  height: 100px;
  width: 100px;
  background-color: @var;
   &:hover {
    background-color: fadeout(@var, 50%)
  }
}

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