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

  • Препроцессоры — это скрипт, программа и т.д. и т.п. принимающая и выдающая данные, предназначенные для другого ПО и т.д. (немного грязно, однако более детально можете почитать и интернете).
  • Less — это динамический язык стилей, созданный под влиянием SASS

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

Чтобы начать использовать нам потребуется то, что будет преобразовывать одно в другое. Это может быть комплексная программа, скрипты или инструменты сборки проектов. Могу порекомендовать то, чем сам пользовался в самом начале:

  • Koala app — koala-app.com
  • Расширение для вашего редактора (точно есть в редакторах Brackets, Atom, VS Code)
  • Prepros — prepros.io (увы, в России сайт почему-то заблокирован, однако VPN в помощь. ПЛАТНО)

Я буду использовать как раз последний вариант ибо за 29$ программа дает очень многое: сборку, deploy, объединение всего и вся ну и самое главное live-reload (чтоб не перезагружать страницу).

Программа Prepros

Начало работы

С пустым трепом закончено. Начинаем вливаться в рабочий процесс. Создаем структуру проекта:

less  
— Style.less  
— Vars.less (необяхательно, для записи переменных)  
— Mixin.less (необяхательно, для записи миксинов)  
Index.html

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

Переменные

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

Выглядит это примерно так:

@width: 10px;  
@height: @width + 10px;  
 #header {  
     width: @width;  
     height: @height;  
 }

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

#header {  
     width: 10px;  
     height: 20px;  
 }

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

К тому же переменные можно использовать в функциях, циклах и других операциях, о которых мы поговорим чуточку позже…

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

@act: #ff0000;  
@blue: blue;  
@l-gray: lightness(gray, 10%);

Миксины (примеси)

Миксины — это простой способ примешивания\присоединения свойств из одного набора правил в другой. В моем случае, при написании кода я процентов 20 всего времени сокращаю, используя набор миксинов, который выложу целиком в другой заметке.

Можно разделить миксины на две группы: с параметрами и без них.

Без параметров: .mixin { стили }
С параметрами: .mixin(@param) {свойство: @param}

Рассмотрим пример:

.bordered(@size, @style: solid) {  
  border-top: @style @size black;  
  border-bottom: @style @size black;  
}

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

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

Делаем запись:

#menu a {  
  color: #111;  
  .bordered(1px);  
  // .bordered(1px, dashed); если нужно переопределить переменную по умолчанию  
}

На выходе мы получаем следующее:

#menu a {  
  color: #111;  
  border-top: solid 1px black;  
  border-bottom: solid 1px black;  
}

Выводить миксин можно двумя способами: .mixin(); или .mixin;

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

Вложенность

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

#header {  
  color: black;  
}  

#header .navigation {  
  font-size: 12px;  
}  

#header .logo {  
  width: 300px;  
}

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

#header {  
  color: black;  

  .navigation {  
    font-size: 12px;  
  }  

  .logo {  
    width: 300px;  
  }  
}

В качестве сложенных значений можно использовать и @media

.box {  
  width: 300px;  
  @media (min-width: 768px) {  
        width: 600px;  
    }  

    @media (min-width: 1280px) {  
    width: 800px;  
    }  
}

Логические операции

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

@base: 5%;  
@filler: @base * 2;  
@summa: 5cm + 10mm;  
@param: 50vh/2;  
color: #112244 + #111;  
width: calc(50% + (@param - 20px));

Самые важные операции и отличительные особенности мы с Вами рассмотрели, остальное Вы можете более детально изучить на официальном сайте lesscss.org, ибо там все действительно хорошо и подробно расписано.

А мы переходим к последнему и очень важному в Less

Импорт файлов

Обычно импортируемые файлы размещаются в самом верху стилей, в Less совершенно насрать, куда вставлять @import. Однако тут можно использовать некоторые параметры импорта для CSS файлов, чтобы при компиляции файла импорт был не ссылкой на документ, а непосредственно выводится сам код импортируемого документа. Для этого просто нужно написать (inline). Вот несколько примеров:

@import "vars"; // для импорта с расширением .less  
@import "vars.less"; // для импорта с расширением .less  
@import "bootstrap.css";  // подключаем сетку к документу  
@import (inline) "bootstrap.css";  // включаем исходный файл прямо в вывод документа

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

@import (keyword) "filename";

О ключевых словах (keyword) можете прочитать более детально опять же на официальном сайте: lesscss.org/features/#import-atrules-feature

Однако по своей практике скажу, что кроме inline и reference (использование less файл, но без его вывода) я ничего не использовал. Поэтому и не стал описывать…

Рабочий пример по изученному материалу

Для того, чтобы было удобнее работать с media, можно создать удобный миксин с переменными

@sizes: {  
  mobile: 320px;  
  tablet: 768px;  
  desktop: 1024px;  
}  

.navbar {  
  display: block;  
  @media (min-width: @sizes[tablet]) {  
      display: inline-block;  
    }  
}

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

.navbar {  
  display: block;  
}  

@media (min-width: 768px) {  
    .navbar {  
        display: inline-block;  
    }  
}

Ин конклюжен

Я уже более 6 лет работаю с данным метаязыком и остаюсь доволен. Пробовал SASS (.scss), однако не понравился синтаксис его ибо less более короткий в записи. Есть конечно же SASS (.sass) который меня более чем устраивал и устраивает сейчас, однако есть много НО, о которых я расскажу чуть позже.

Поэтому, что хочу посоветовать. Если до сих пор фигачите на стоковом css, то для вас less будет следующим этапом развития. Вы сократите время разработки, а так же автоматизируете множество рутинных операций, таких как: нумерация через циклы nth-child() удобная работа с переменными, @media ну и самое вкусное — миксины.

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

Поставь лайк и поделись с друзьями!