Привет. Начну свое повествование с того, что заголовок написан не совсем корректно, однако так звучит удобнее, да и для новичка будет более логично звучать. Однако все немного не так. Давайте с базовых определений:
- Препроцессоры — это скрипт, программа и т.д. и т.п. принимающая и выдающая данные, предназначенные для другого ПО и т.д. (немного грязно, однако более детально можете почитать и интернете).
- Less — это динамический язык стилей, созданный под влиянием SASS
В итоге в результате компиляции мы на выходе получаем то, что вам нужно. Вы уже поняли, что с изложением мыслей у меня небольшие проблемы, однако если хотите углубиться в историю и определения, то тут это будет не так то и часто. Главное, что вам нужно знать: хотите писать стили быстрее и соответственно быстрее разрабатывать сайты, то Less css будет первым шагом на этом непростом пути.
Чтобы начать использовать нам потребуется то, что будет преобразовывать одно в другое. Это может быть комплексная программа, скрипты или инструменты сборки проектов. Могу порекомендовать то, чем сам пользовался в самом начале:
- Koala app —
koala-app.com - Расширение для вашего редактора (точно есть в редакторах
Brackets, Atom, VS Code) - Prepros —
prepros.io(увы, в России сайт почему-то заблокирован, однако VPN в помощь. ПЛАТНО)
Я буду использовать как раз последний вариант ибо за 29$ программа дает очень многое: сборку, deploy, объединение всего и вся ну и самое главное live-reload (чтоб не перезагружать страницу).
Начало работы с less css
С пустым трепом закончено. Начинаем вливаться в рабочий процесс. Создаем структуру проекта:
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 ну и самое вкусное — миксины.
В следующем уроке я уже на практике буду показывать, как реализовать действительно полезные и рабочие задачи. Добавляйте сайт в закладки ну и делитесь с друзьями.
