Что такое LESS и как его использовать
В этой статье мы поговорим о возможностях препроцессора Less, которые в силу каких-то неведомых сил, практически никто не использует. Кроме того, поговорим о недостающем функционале и попытаемся его добавить.
Начать я предлагаю с небольшого напоминания о том, как делать не нужно, даже если очень хочется. Посмотрите на фреймворк Alesya , который разработал товарищ, обучающий Less других людей. Постарайтесь внимательно посмотреть на файл./core/functions.less . Хотя нет, не переходите по ссылке, просто посмотрите на скриншот небольшой части этого файла. Когда первый раз увидел - я просто выпал в осадок.
Оправдание - циклы очень медленные, как следствие, скорость трансляции Less в CSS снижается, а время трансляции увеличивается. Pentium 4? Без обид, но это расстраивает.
Приведу отрывок из книги «HTML5 для веб-дизайнеров» за авторством Джереми Кит, который не так давно стал героем пабликов в ВК:
Предположим, что живет на свете злой урод, который ненавидит веб и всех пользователей Интернета. Этому господину наверняка плевать, что встраивать на страницу аудиофайл, который начинает проигрываться автоматически, невероятно грубо и глупо. С помощью атрибута autoplay можно удовлетворить его глубоко порочные желания.
Если вы когда-нибудь будете так использовать атрибут autoplay, знайте: я вас найду.
Поэтому, если вы будете так же использовать Less, знайте, вас уже ищут и скоро найдут.
Расширение селекторовИмеем типичный для наших дней прерыватель потока:
Clearfix { &:before, &:after { content: " "; display: table; } &:after { clear: both; } }
И какой-то селектор, который подразумевает использование clearfix. Конечно, можно использовать.clearfix как примесь и всюду плодить огромное количество лишнего, но нужного кода. Однако, можно избежать этого, используя расширение селекторов.
Например, так:
Navbar { &:extend(.clearfix all); ... } .navbar-collapse { &:extend(.clearfix all); ... } .ad { &:extend(.clearfix all); ... }
В итоге наш класс.clearfix начинает общаться с друзьями из различных частей ваших стилей, при этом ни с кем не делясь лишними строчками кода:
Clearfix:before, .clearfix:after, .navbar:before, .navbar:after, .navbar-collapse:before, .navbar-collapse:after, .ad:before, .ad:after { content: " "; display: table; } .clearfix:after, .navbar:after, .navbar-collapse:after, .ad:after { clear: both; }
Конечно, злоупотреблять этим не стоит. Честно говоря, советую использовать расширение селекторов только для clearfix и в случаях, когда действует правило: «Ну очень надо, ничего поделать не могу, иначе будет хуже». Не стоит использовать расширение селекторов тогда, когда происходят махинации со стилями элементов. Наиболее частая и глупая ошибка:
Class { color: #fff; background: #fff; } .new-class { &:extend(.class); } // .class, // .new-class { // color: #fff; // background: #fff; // }
Так делать нельзя. Это глупо. Лучше использовать.class как примесь:
Class { color: #fff; background: #fff; } .new-class { .class; } // .class { // color: #fff; // background: #fff; // } // .new-class { // color: #fff; // background: #fff; // }
Запомните это!
Параметры импортаПожалуйста, обратите внимание на раздел документации «параметры директивы импорта» .
Я приведу лишь краткое описание самых важных из этих параметров:
reference
Позволяет использовать.less файлы, но не выводить их содержимого без явного вызова. Очень полезный параметр, если вы пользуетесь Bootstrap как библиотекой, а не фреймворком, то есть:
@import (reference) "bower_components/bootstrap/less/bootstrap"; .my-alert { .alert; }
Использование этого параметра даёт возможность подключать файлы не.less расширения. Параметр не обязательный, так как и без него всё будет работать, но, тем не менее, если вы любите порядок - пригодится. Этот параметр можно применять при подключении файлов с расширением, отличным от.less , к примеру, .variables , .mixins .
Применять нужно так:
@import (keyword) "filename";
С подробным описанием и примерами можно ознакомиться на страницах документации. Вот так вот вежливо я посылаю тебя, мой читатель, читать документацию. Незабываемые ощущения:)
Условные конструкцииВ Less есть условные конструкции. Да, они не полноценные, если сравнивать их с другими препроцессорами, но всё таки их наличие не может не радовать. Мне они кажутся даже удобнее, чем @if в Sass, хотя практической разницы никакой нет.
Mixin(@variable) { & when (@variable = 1) { content: "TRUE" } & when not (@variable = 1) { content: "FALSE" } } .class-test { .mixin(1); .mixin(2); }
В итоге мы получим следующий CSS:
Class-test { content: "TRUE"; content: "FALSE"; }
Что же только что произошло? Магия?
На самом деле - нет. Ключевое слово when тут заменяет привычный во всех языках программирования if и имеет всего два логических элемента: not - отрицание, and - просто and и всё, больше ничего нет. Особо крутого с этим сделать не получится, но я использую условный оператор для того, чтобы не генерировался лишний код. Одной из таких ситуаций, например, является свойство border-radius в генераторе стилей кнопки. Зачем лишний раз будет прописываться какое-либо свойство при генерации, если его значение не играет роли (0)? - Правильно, не нужно.
Интерполяция переменныхЕсть в Less интересная конструкция, когда значение одной переменной мы получаем в зависимости от других.
// Variables @clr-grey-100: #fafafa; @clr-grey-200: #f5f5f5; @clr-red-100: #ffebee; @clr-red-200: #ffcdd2; .mixin(@color, @temperature: 500) { color: ~"@{clr-@{color}-@{temperature}}"; background: e("@{clr-@{color}-@{temperature}}"); } .class-test { .mixin(grey, 100); &-test { .mixin(red, 200); } }
В этом примере вызывается примесь, в которой параметрами выступают цвет (@color ) и его температура (@temperature ). Далее мы собираем все переменные в одну, то есть, проще говоря, конструируем новую переменную и получаем её значение. Процесс, когда строка, условно говоря, превращается в вызов переменной и есть интерполяция переменных.
Заметьте, что в этом примере мы используем фигурные скобки после собачки - это очень важно.
На выходе:
Class-test { color: #fafafa; background: #fafafa; } .class-test-test { color: #ffcdd2; background: #ffcdd2; }
Кстати, такого я найти в Sass и Stylus не смог. Может подскажет внимательный читатель? :)
ЦиклыМногие приверженцы препроцессоров Sass и Stylus давят на то, что в Less нет циклов, но они есть, хотя и не такие как у всех. Вот только пользоваться ими неудобно.
Допустим, что у нас есть список цветов:
@list-red: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c;
Для примера, давайте создадим для каждого цвета свой класс:
Color-generator(@index: 1, @color) when (@index