И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS , а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?
И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS, а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?
Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS, придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS.
Компиляция LESS и VS Code
Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less. Как это работает?
- Создаем файл стилей c расширением .less
- После сохранения, автоматически сгенерируется .css файл в ту же папку.
Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS, им нужен CSS код.
Переменные LESS
Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: "В чем прикол? Все равно мне нужно что-то прописывать, какая разница?"
Главная фишка - это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS. Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.
@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;
Теперь пишем обычный код, как мы это делали в CSS, но вместо значений подставляем переменные.
LESS
div {
padding: 0;
font-family: Roboto, sans-serif;
color: @black;
}
После сохранения, компилируется CSS код. Мы не трогаем вообще CSS файл, вся работа ведется в LESS файле. Вы можете заносить любые часто повторяющиеся свойства в переменные.
CSS
div {
padding: 0;
font-family: Roboto, sans-serif;
color: #000;
}
Миксины (mixin) в LESS
Миксины полезны для повторного использования набора свойств – рамок, кнопок, заголовков. Сгруппированный набор свойств, может применяться к разным селекторам.
На сайте несколько однотипных кнопок разного цвета, но с одинаковыми шрифтовыми свойствами. Создаем миксин, который помогает автоматизировать процесс создания кнопок.
.button_font {
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
}
Примешиваем миксин в свойства селектора кнопки.
.portfolio__button {
padding: 15px 80px;
color: #344258;
.button_font;
}
На выходе получаем:
.portfolio__button {
padding: 15px 80px;
color: #344258;
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
}
Символ амперсанд
Вместо дублирования названия селектора, используем символ амперсанд.
.portfolio__item {
position: relative;
background-color: #3c3c3c;
}
&:hover {
background-color: #ccc;
}
}
CSS
.portfolio__item {
position: relative;
background-color: #3c3c3c;
}
.portfolio__item:hover {
background-color: #ccc;
}
Медиа-запросы в LESS
Можно записывать медиа-запросы прямо внутри селектора.
LESS
.header__title {
color: #344258;
font-size: 40px;
font-family: "DIN Pro", sans-serif;
padding: 0 20px;
@media only screen and (max-width : 320px){
font-size: 22px;
}
}
CSS
.header__title {
color: #344258;
font-size: 40px;
font-family: "DIN Pro", sans-serif;
padding: 0 20px;
}
@media only screen and (max-width : 320px) {
.header__title {
font-size: 22px;
}
}
Заключение
Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS. Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.
