CSS - простой и доступный инструмент. Однако, он имеет свои ограничения, особенно когда встает вопрос о сопровождении готового кода. Когда нужно модифицировать тысячи строк со стилями, разделенных по нескольким файлам, задача становится проблемой.
Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), но в данном уроке мы рассмотрим LESS .
Редактор LESSНа момент написания урока существовал единственный редактор, целиком посвященный работе с файлами LESS - ChrunchApp . Данное приложение кросс платформенное, построенное на Adobe Air , его можно запускать на Windows, Mac OSX and Linux.
Для других редакторов (таких как Dreamweaver, Coda, NotePad++ и SublimeText 2) существуют плагины или дополнения, которые позволяют организовать подсветку синтаксиса LESS.
Использование LESSИспользовать LESS очень просто. Нужно просто добавить две строки в тег head вашего документа HTML. Первая строка содержит название вашего файла.less, а вторая строка - подключение библиотеки less.js (ее можно скачать с официального сайта).
В нашем уроке мы покажем другой способ. Мы будем использовать компилятор LESS: для Windows можно применять WinLess , а для Mac OSX - LESS.app .
Создаем файл.less в рабочей директории. Затем открываем компилятор (WinLESS или LESS.app) и импортируем рабочую директорию в него. компилятор найдет все файлы.less . И все. Теперь, когда бы мы не изменили файл.less , компилятор автоматически будет генерировать обычный код CSS в файл.css , который воспринимается браузером.
Остается только привязать CSS файл к документу HTML:
Синтаксис LESS
В отличие от обычного CSS, LESS больше похож на язык программирования. Он динамический, поэтому логичного ожидать использования в нем переменных , операций и области видимости .
ПеременныеСначала рассмотрим переменные .
При работе с CSS вы вероятно часто сталкивались с ситуацией, когда повторяющееся значение устанавливалось в нескольких блоках по всей таблице стилей.
Class1 { background-color: #2d5e8b; } .class2 { background-color: #fff; color: #2d5e8b; } .class3 { border: 1px solid #2d5e8b; }
Все прекрасно, пока не придется просеивать 1000 одинаковых участков кода по всей таблице стилей, чтобы поменять значение. Такая ситуация может сложиться при работе над большим проектом.
При использовании препроцессора LESS такая проблема легко решается с помощью переменных . Переменные позволяют хранить значения, которые можно многократно использовать в таблице стилей.
@color-base: #2d5e8b; .class1 { background-color: @color-base; } .class2 { background-color: #fff; color: @color-base; } .class3 { border: 1px solid @color-base; }
В выше приведенном примере в переменной @color-base сохраняется значение #2d5e8b . И когда потребуется изменить цвет, то нужно будет поменять значение только в переменной.
В переменной можно использовать и другие значения:
@font-family: Georgia @dot-border: dotted @transition: linear @opacity: 0.5
ПримешиванияВ LESS можно использовать примешивания для хранения набора правил и применения их в других наборах. Например:
Gradients { background: #eaeaea; background: linear-gradient(top, #eaeaea, #cccccc); background: -o-linear-gradient(top, #eaeaea, #cccccc); background: -ms-linear-gradient(top, #eaeaea, #cccccc); background: -moz-linear-gradient(top, #eaeaea, #cccccc); background: -webkit-linear-gradient(top, #eaeaea, #cccccc); }
В Выше приведенном примере мы устанавливаем цвет градиента в классе.gradients . Затем, когда нужно добавить градиент, нужно просто вставить.gradients следующим образом:
Box { .gradients; border: 1px solid #555; border-radius: 3px; }
Класс.box наследует все объявления из.gradients . Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:
Box { background: #eaeaea; background: linear-gradient(top, #eaeaea, #cccccc); background: -o-linear-gradient(top, #eaeaea, #cccccc); background: -ms-linear-gradient(top, #eaeaea, #cccccc); background: -moz-linear-gradient(top, #eaeaea, #cccccc); background: -webkit-linear-gradient(top, #eaeaea, #cccccc); border: 1px solid #555; border-radius: 3px; }
При работе с CSS3 можно использовать библиотеку LESS ELements , чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например, border-radius , gradients , drop-shadow и так далее.
Чтобы использовать LESS нужно просто добавить правило @import файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.
@import "elements.less";
Теперь можно использовать все классы из elements.less . Например, чтобы добавить скругление углов рамки с радиусом 3px к элементу div , нужно написать:
Div { .rounded(3px); }
Вложенные правилаПри работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:
Nav { height: 40px; width: 100%; background: #455868; border-bottom: 2px solid #283744; } nav li { width: 600px; height: 40px; } nav li a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; }
В обычном CSS коде мы выбираем наследников, указывая родителя в каждом наборе правил.
В LESS можно улучшить выше приведенный набор правил с помощью вложения наследников в родительский элемент:
Nav { height: 40px; width: 100%; background: #455868; border-bottom: 2px solid #283744; li { width: 600px; height: 40px; a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; } } }
Также можно использовать псевдо-классы, например:hover , с помощью символа амперсенда (&). Допустим, мы хотим добавить:hover к тегу ссылки:
A { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; &:hover { background-color: #000; color: #fff; } }
ОперацииТакже можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.
Допустим, что элемент B в два раза выше элемента A:
@height: 100px .element-A { height: @height; } .element-B { height: @height * 2; }
Сначала мы определяем переменную @height и назначаем ее для указания высоты элемента А.
В элементе В мы просто умножаем значение переменной на 2. Теперь, когда мы изменяем значение переменной @height , элемент В всегда будет в два раза выше.
Область видимостиLESS использует концепцию области видимости . Сначала используются переменные из локального контекста, а если их нет, то происходит поиск в более широкой области видимости.
Header { @color: black; background-color: @color; nav { @color: blue; background-color: @color; a { color: @color; } } }
В приведенном примере header имеет переменную для цвета со значением black , но фон элемента nav будет иметь цвет blue , так как переменная @color находится в локальном контексте.
ЗаключениеВ следующих уроках серии мы разберем пример реального использования LESS и некоторые полезные аспекты инструментария.
a less apocalyptic view of the future
не столь пессимистические взгляды на будущее ☰
A fair heritage is no less agreeable than a fair wife.
Хорошенькое наследство ничуть не менее приятно, чем хорошенькая жена. ☰
Traffic is one of the less agreeable aspects of city life.
Дорожные пробки являются одним из наименее приятных аспектов городской жизни. ☰
The outline became less and less distinct as the light faded.
Очертания становились все менее и менее четкими, в то время как свет постепенно гас. ☰
The community is demanding a less aggressive style of policing.
Сообщество требует менее агрессивного стиля работы органов правопорядка. ☰
Eat less and exercise more if you want to live to a ripe old age.
Меньше ешьте и больше занимайтесь физическими упражнениями, если хотите дожить до глубокой старости. ☰
The back view of the hotel was even less appealing than the front.
Сзади эта гостиница выглядела даже менее привлекательно, чем спереди. ☰
No less a luminary than Wilhelm Furtwangler conducted the premiere.
За дирижерским пультом на премьере стоял не кто иной, как сам Вильгельм Фуртвенглер, знаменитость. ☰
The system is failing most disastrously among less academic children.
Эта система абсолютно не годится для детей, не склонных к учёбе. ☰
"Will you please come with me?" It was less a request than a command.
Пройдёмте со мной, пожалуйста. - Это была не столько просьба, сколько приказ. ☰
As the years went by, he seemed to care less and less about his reputation.
Со временем стало казаться, что собственная репутация заботит его всё меньше и меньше. ☰
The premiere was attended by no less a personage than the president himself.
Премьеру даже посетил не кто-нибудь, а сам президент, собственной персоной. ☰
People who can exercise some control over their surroundings feel less anxious.
Человек, который может осуществлять некоторый контроль над своим окружением, чувствует себя менее тревожно. ☰
Outgoing people are more high-spirited and less anxious about social situations.
Общительные люди более жизнерадостны и меньше озабочены социальными проблемами. ☰
When she lost her looks (=became less attractive) she found it difficult to get work.
Когда она потеряла вид (т.е. стала менее привлекательной), то обнаружила, что ей очень трудно получить работу. ☰
Polls show that voters are growing less and less content with the current administration.
Опросы показывают, что избиратели всё больше и больше недовольны нынешней администрацией. ☰
I couldn"t care less about her. *
I could care less about what you believe. *
Мне начхать на то, что ты думаешь. ☰
Lesser Wain
Less of your sauce, my girl!
Поменьше дерзости, девочка моя! ☰
Of two evils choose the less .
Из двух зол выбирай меньшее. (посл.) ☰
All meat is sold less the bone.
Всё мясо продаётся без костей. ☰
She walks less than she should.
Она ходит меньше, чем следует.
В этой статье мы поговорим о возможностях препроцессора 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
