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