Программируемый язык стилей LESS. CSS — это сложно

CSS – мощный и интересный язык стилизации страницы. Он быстрый и понятный, но что самое важное, в минимальной версии поддерживается абсолютно всеми браузерами будь то небольшие мобильные устройства или огромные телевизоры.

Однако, при всех своих несомненных достоинствах у CSS есть некоторые, даже не недостатки, но ограничения. Эти ограничения не являются критичными, но могут значительно растянуть время разработки проекта.

Какие это могут быть ограничения. Например, цвет. Если мы видим запись вида #FF9F94 , то невозможно сходу установить, что она обозначает темно-персиковый цвет. Гораздо проще создать переменную, например darkPeach , присвоить ей значение #FF9F94 и далее в таблице стилей использовать эту переменную. Какие удобства это может за собой принести: не нужно помнить код цвета для указания его в другом месте, для смены одного цвета по всей таблице достаточно просто поменять значение переменной.

Другими словами, CSS не хватает немного программирования и логики, чтобы сделать работу с ним более практичной. Хорошо, что для этого существует ряд инструментов, среди которых есть LESS.

Что такое LESS?

LESS – это динамический язык стилей, своеобразная надстройка над CSS, которая добавляет в CSS некоторый набор динамических свойств: переменные, примешивания, операции, функции и т.д.

LESS – это скрипт, который может использоваться как на стороне клиента (CSS-таблица рассчитывается в браузере пользователя), так и на стороне. Однако существуют более удачные способы использовать LESS – например, предварительная компиляция таблицы. В таком случае можно получить стандартную таблицу стилей, которая будет правильно использоваться браузером и не требовать постоянно конвертировать ее заново.

Переменные

Переменные в LESS работают точно так же, как и в других языках программирования. Вы создаете переменную, присваиваете ей значение, а дальше можете использовать ее в любом правиле CSS. Например:

@serif-font: Georgia; h1, h2, h3, h4 {font-family: @serif-font;} .large-text {font-family: @serif-font;}

В данном случае переменная @serif-font хранит в себе название шрифта. Если нужно поменять шрифт Georgia на Times New Roman, то достаточно сменить значение переменной и значение шрифта изменится во всем документе. Еще удобнее использовать переменные с кодами цветов. Например, следующий отрывок CSS

Body {color: #ff9900; background-color:#cccccc;} p {color: #ff9900;} h1 {color: #ff9900;}

можно заменить следующим:

@color-orange: #ff9900; @color-gray: #cccccc; body {color: @color-orange; background-color: @color-gray;} p {color: @color-orange;} h1 {color: @color-orange;}

Как видите, достаточно исправить цвета в заголовке вашего CSS-документа, чтобы исправить их по всему документу.

У переменных есть области видимости. Внутри каждого правила можно переназначать значение переменной для этого правила. В следующем примере цвет ссылки будет белый, а цвет фона кнопки – серый:

@color: #сссссс; a { @color: #ffffff; color:@color;} button { background: @color;}

Важно заметить, что переменные в LESS скорее ближе к константам, так как переназначить их ниже по коду невозможно, только внутри определенных правил.

Операции

LESS позволяет использовать операции внутри правил, что позволяет добиться точного контроля за значениями:

Button{ @unit: 3px; border:@unit solid #ddd; padding: @unit * 3; margin: @unit * 2; }

Как видно из кода выше, переменная @unit получает значение 3px . Оно подставляется в значение ширины границы. Отступы соответственно получаются умножением этого значения на 3 или 2 .

В LESS можно использовать все арифметические действия. В качестве операндов могут выступать не только численные значения, но и цвета. Выполнять так называемое цветовое смешивание. Если вы хотите изменить значение цвета, то можете сделать это смешением или вычитанием другого цвета:

Button { background: #941f1f + #222222; border: #941f1f - #111111; }

Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет #B64141 - более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: #830E0E . На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.

Работа с цветом

Есть и другие возможности работы с цветом. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Достигается это путем применения цветовых функций.

Примеры использования и результаты отображения смотрите в таблице ниже:

@color: #3d82d1; .left_box { background:lighten(@color, 20%); } .right_box { background:darken(@color, 20%); }
@color: #3d82d1;.left_box { background: desaturate(@color, 18%); } .middle_box { background: @color; } .right_box { background: saturate(@color, 18%); }
@color: #3d82d1;.left_box { background: spin(@color, 25%); } .middle_box { background: @color; } .right_box { background: spin(@color, -25%); }

Каждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую:

@color = #167e8a; hue(@color); saturation(@color); lightness(@color);

Для чего это нужно? Нормальному человеку сложно распознать, какой цвет зашифрован HEX кодом, однако LESS работает не с самим кодом, а с тоном, который он задает. Допустим, вы нашли пурпурный цвет, который вам понравился (#e147d4). Но сейчас вам нужен более сливочный его оттенок, тогда вам поможет следующая конструкция из двух функций:

@color: #c480bd; .class { background-color: desaturate(spin(@color, 18), 12%);}

Вложенность

Одним из основных достоинств CSS является каскадность обновления его стилей. То есть для задания стиля параграфа внутри контейнера article нужно использовать код:

Article p { … }

И это хорошо, но что, если нужно задать еще несколько стилей для элементов внутри этого блока. Тогда придется постоянно дописывать.article перед началом определения правила. LESS позволяет вкладывать стили друг в друга, тем самым упрощая написание кода:

A { color:red; } p { margin:0px; } article { a { color: green; } p { color: #555; a { color:blue; } } }

Отступы необязательны, но они улучшают читабельность кода. Уровни вложенности не ограничены.

Примешивания (mixins)

Чтобы создать рамку, у которой скруглены верхние углы придется использовать следующий код:

Tab { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }

И этот кусок кода нужно переписывать каждый раз, когда необходимо сделать такое закругление. Это можно упростить с помощью LESS. Для этого нужно создать примешивание. Посмотрите пример:

Rounded-top { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .top { background: #333; color:#fff; .rounded-top; ] .submit { .top; }

В данном случае мы создали и определили класс rounded-top , а затем импортировали все его правила в класс top . А все стили класа top импортированы в класс submit , в том числе и правила для фона и цвета текста.

Если вы обычно используете одинаковый border-radius , но иногда необходим другой, нужно задать примешиванию стандартное значение.

Rounded-top(@radius:6px) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab { background: #333; color:#fff; .rounded-top; } .submit { .rounded-top(3px); }

В данном случае в классе tab будет использоваться значение в 6px , а в классе submit в 3px . Параметры могут быть множественные.

В заключение нужно отметить, что несмотря на ценность LESS, как и с любой другой технологией, его нужно использовать всегда с умом, не стоит им злоупотреблять в ситуациях, в которых удобнее использовать обычный CSS. Однако в тех ситуациях, когда LESS уместен, он станет незаменимым и полезным инструментом.

Less Fraemwork

LESS - это динамический язык стилей, который разработал Alexis Sellier, созданый под влиянием языка стилей Sass, и оказавший влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS. Это продукт с открытым исходным кодом. Первоначально был написан на Ruby, однако в последующих версиях было решено отказаться от использования этого языка программирования в пользу JavaScript. Less - это вложенный метаязык: валидный CSS будет валидной less-программой с аналогичной семантикой. Он обеспечивает следующие расширения CSS: переменные, вложенные блоки, миксины, операторы и функции, и может работать на стороне клиента (Internet Explorer 6+, WebKit, Firefox) или на стороне сервера под управлением Node.js или Rhino.

Как использовать LESS

Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript или скомпилировать его заранее и использовать получившийся CSS файл.

Используем LESS и Javascript файл

Строковая интерполяция

Строковая интерполяция это еще одно причудливое слово, означающее, что эта произвольная строка может храниться в переменной, а затем использоваться в значении свойства.

@url : "http://mycompany.com/assets/" ; background-image : url ("@{url}/sprite.png" );

Это может быть полезно при создании централизованного фреймворка.

Экранирование

Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Если вы хотите создать градиент в IE, вы должны сделать что-то вроде этого:

filter : progid :DXImageTransform .Microsoft.gradient (startColorstr = "#666666" , endColorstr = "#444444" );

Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его.

Button { background : - webkit - gradient (linear , left top , left bottom , from (#666666 ) , to (#444444 )); background : - moz - linear - gradient (top , #666666 , @ color - #444444 ); filter : ~ "progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444")" ; }

Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута.

Импорт

Как и в обычном CSS можно импортировать файлы. LESS позволяет импортировать CSS и LESS используя следующий синтаксис:

@import "reset.min.css" ; @import "framework.less" ; @import "widgets" ;

Первый импорт достаточно очевиден. Он импортирует CSS правила определённые в reset.min.css без обработки их LESS парсером.Второй импорт вставит содержание framework.less и обработает его как любые другие LESS правила.Третий импорт работает также как и второй. Если расширение не установлено, то препроцессор считает его LESS файлом.

Комметарии

Естественно, многострочные комментарии доступны в LESS в таком же виде, как и в CSS. Также LESS разрешает использование однострочных комментариев как в PHP или Javascript, с помощью двойного обратного слеша.

/* This is my main LESS file. It governs how most of the site looks. */ body { padding : 0px ; // This resets the body padding }

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 <= length(@list-red)) { // Получаем цвет по индексу @item: extract(@list-red, @index); // Конструируем класс на основе полученных данных.clr-@{color}-@{index} { color: @item; } // Рекурсия.color-generator(@index + 1, @color); } .color-generator(@color: red);

Получим симпатичный, но не особо нужный список классов:

Clr-red-1 { color: #ffebee; } .clr-red-2 { color: #ffcdd2; } .clr-red-3 { color: #ef9a9a; } .clr-red-4 { color: #e57373; } .clr-red-5 { color: #ef5350; } .clr-red-6 { color: #f44336; } .clr-red-7 { color: #e53935; } .clr-red-8 { color: #d32f2f; } .clr-red-9 { color: #c62828; } .clr-red-10 { color: #b71c1c; }

Пожалуй, это удобно на первых парах. Однако, это удобство исчезает, когда захочется сделать что-то внушительное, например, сетку Bootstrap . И это у них ещё все префиксы прописаны вручную и в удобном для них виде. Представляете махину, в которой префиксы колонок задаются через переменные? А если ещё и аббревиатуры колонок будут в переменных?

С циклами у Less не всё так хорошо, как у Sass или Stylus. Но честно ответьте себе на вопрос: часто ли вам нужны циклы?

More or Less

Многие разработчики, что уже знакомы с Less, используют библиотеку примесей , которая следит за префиксами вашего CSS кода. Но я специально не упоминаю эту замечательную библиотеку, так как её необходимость уходит на второй план, если вы работаете с Autoprefixer .

Библиотека «More or Less» добавляет недостающий функционал Less. К сожалению, документация предполагает следующий принцип работы: Хочешь пользоваться моей библиотекой? - Посмотри на простейший пример, а все более-менее сложные варианты использования узнай разобравшись в коде. Это не порядок. Поэтому рассмотрим все самые интересные функции на житейских и не очень примерах.

Полноценные условные конструкции

Немногим раньше мы говорили, что условные конструкции в Less, мягко говоря, не очень. Не хватает else . Именно такой функционал предлагает нам «More or Less». Для работы с библиотекой необходимо всего лишь её подключить и запомнить несколько простых конструкций.

Здесь и в других примерах статьи, я буду подключать все функции по отдельности, используя Bower. Поэтому, оставлю команду для установки пакета:

Bower i --save more-or-less

Итак, у нас есть вот такой код:

@import "bower_components/more-or-less/less/fn/_if.less"; .class-test-if { .if(isnumber(2), { .-then() { background-color: #fff; } .-else() { background-color: #000; } }); }

На выходе:

Class-test-if { background-color: #fff; }

Поменяем 1 на string :

Class-test-if { background-color: #000; }

Замечательно. Но как сравнить, например, переменную с каким-то конкретным значением, а не типом? - Почти так же легко.

Class-test-if { @variable: col; .if(@variable eq col, { .-then() { content: "true"; } .-else() { content: "false"; } }); }

Всё работает как часики:

Class-test-if { content: "true"; }

Кстати, вы заметили ключевое слово, которое придётся запомнить? - Не беда! Ничего сложного тут нет:

ls (less, <) - меньше;
lte (less-than or equal to, <=) - меньше или равно;
gt (greater, >) - больше;
gte (greater-than or equal to, >=) - больше или равно;
eq (equality, =) - равно;

Полноценный цикл for

Наиболее удобным в этой библиотеке получился стандартный во всех ЯП цикл for. Давайте подключим функцию библиотеки и рассмотрим подробнее пример.

@import "bower_components/more-or-less/less/fn/_for.less"; .class-test-for { // Просто переменная, можно и без неё @count: 4; // Цикл.for(@count); .-each(@index) { &-@{index} { width: @index * (100% / @count); } } }

Заметили, что синтаксис куда приятнее, чем у оригинального цикла, который мы рассматривали в начале статьи?

В этом примере генерируется простейшая сетка, без всяких фишек. Код после трансляции в CSS:

Class-test-for-1 { width: 25%; } .class-test-for-2 { width: 50%; } .class-test-for-3 { width: 75%; } .class-test-for-4 { width: 100%; }

For(@n);.-each(@i) { ... }

Судя по всему, этот вариант записи пытается имитировать стандартную форму записи for в других ЯП. Должен признать, что выглядит это ужасно, поэтому советую использовать вариант из этой статьи.

Конкатенация элементов массива

Для объединения всех элементов массива (списка) в одну строку используется функция join , принимающая аргументами массив, который необходимо преобразовать в строку, и разделитель.

К слову, этот разделитель называется glue - строковый аргумент, с помощью которого будут соединены в строку все элементы массива.

Class-test-join { // Список (массив) @animals: "cat", "tiger", "lion"; // Конкатенация элементов списка (массива) .join(@animals, " "); content: "@{string}"; }

На выходе получим вот такую вот строку:

Class-test-join .animals:after { content: "cat tiger lion"; }

Представить себе не могу, зачем это нужно в Less? Лучше бы сделал кто-нибудь функцию, которая позволяла бы добавлять записи в цикле в массив без лишней возни.

Цикл repeat

Ещё одно сомнительное изобретение, которое не может найти в моей голове практического применения.

Class-test-repeat { .repeat(".test", " + ", 5); @{string} { float: right; } }

Какой-то глуповатый пример из документации:

Class-test-repeat .test + .test + .test + .test + .test { float: right; }

Выводы

К сожалению, используя «More or Less» сетку Bootstrap построить опять таки сложно. В любом случае не обойтись без when (@index <= ...) , чтобы создать рекурсию и собрать классы в список для дальнейшей работы. Очень уж не хватает возможности создавать массив.

После «More or Less» стало куда приятнее работать с циклом for и условием if . Остальные функции созданы для того, чтобы просто быть и показать возможности - применение им найти сложно, но можно.

Если есть острая необходимость в полноценной поддержке циклов, условий и, например, удобств в виде подключения папок или нормальных массивов, то следует присматриваться к Sass или Stylus.

Ссылки

А как же без дополнительного материала? Думали, что я вот так просто вас отпущу?

Курс по основам Less от HTML Academy .
Старые - новые фишки Less на Habrahabr .
Статья о том, что можно вытворять с примесями на SitePoint .

Ничего особенного в этих статьях нет, нужно всего лишь почитать документацию.

В наше время не знать верстальщику что такое css-препроцессоры наверно уже постыдное явление. Но сам я долго не хотел вникать как же его настроить и использовать. Мне казалось, что быстрее написать по старинке сразу css, чем сидеть и вникать в что-то новое (особенно если учесть, что дедлайн всегда близко). Но последнее время все больше и больше проектов, даже средней сложности делаются с использованием less или sass.

Поэтому хочу вкратце сделать так сказать интродьюс в работу с css-препроцессором LESS. Почему я выбрал для начала его? Потому что синтаксис у него такой же, как и у обычного css. LESS — это надстройка над css и если просто вставить обычный код из css файла, то он успешно скомпилируется, при этом в less можно использовать переменные и миксины (функции, которые значительно ускоряют написание например градиентов или свойств требующих множество повторений с разными префиксами).

Итак, начнем. Прежде всего нам необходимо понять, что less — это файл, который при компиляции выдаст нам готовый файл css. Скомпилировать его можно несколькими способами. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету при загрузке страницы или скомпилировать его заранее, и использовать получившийся CSS файл.

Используем LESS и Javascript файл

Для начала нужно скатать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт.

Затем создадим файл с расширением.less и привяжем его с помощью такого кода:

При этом LESS файл должен находиться перед JS файлом. Теперь LESS файл будет работать также как и обычный CSS.

Компилируем LESS файл

Такой способ меня привлекает больше тем, что не нужно множеством подключений грузить файлы LESS, а можно сразу грузить на клиенте заранее минифицированный единственный файл css.
Прежде всего нам нужно установить NodeJs. Для этого мы идем на официальный сайт http://nodejs.org/ и нажав на кнопку install начнется загрузка установочного файла для вашей операционной системы. Установив его теперь нужно установить компилятор less, для этого мы откроем консоль и введем:

Npm install -g less

Теперь его можно компилировать либо вручную через консоль. Подробную инструкцию можно прочитать на официальном сайте LESS. Либо использовать таскеры (о них мы поговорим в дальнейшем), либо средствами вашей IDE. Я использую PhpStorm с плагином File Watchers. Теперь открыв в нем наш проект, создаем в нем папку например «source» или «less», куда мы в дальнейшем будем сохранять наши исходные файлы.

Открываем Preferences -> File Watchers — > Нажимаем «+» внизу окна и выбираем тип файлов для отслеживания less. На данный момент, если все было сделано верно, то даже с дефолтными настройками наша IDE будет отслеживать less файлы в проекте и компилировать их в реальном времени при изменении и помещать их в папку рядом с компилируемым исходным файлом. Главное убедитесь, что в поле Program прописан путь к компилятору less (который мы устанавливали в консоли).

Работа с LESS

Наконец давайте немного развлечемся – и приступим к написанию LESS кода. Как вы увидите код легко читать и понимать, так как синтаксис очень похож на обычный css, что снижает порог вхождения девелопера для его использования.

Переменные в LESS работают так же как в PHP, JS и в большинстве других языков программирования. Вы можете использовать их для хранения значения, и затем использовать переменные вместо самого значения всякий раз, когда вам это нужно.

@header-font: Georgia ; h1 , h2 , h3 , h4 { font-family : @header-font; } .large { font-family :@header-font; }

В примере выше мы объявляем переменную @header-font и записываем туда значение «Georgia». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia. Если же мы решим, что Trebuchet MS лучше подходит для наших заголовков, то нам не нужно будет просматривать весь файл, мы просто изменим значение переменной.
Я нашел отличное применение переменным в определении цветов сайта. В старые добрые времена (которые были не так давно) я использовал что-то вроде этого:

/* Colors for my Website #ff9900 - Orange - used for links and highlighted items #cccccc - Light Gray - used for borders #333333 - Dark Black - Used for dark backgrounds and heading text color #454545 - Mid Black - Used for general text color */ body { background : #333333 ; color : #454545 ; } a { color :#ff9900 ; } color : #333333 ; }

Нет ничего плохого в том, чтобы документировать ваши цвета также как здесь, это хорошая практика, проблема заключается в том, что документация не имеет ничего общего с функциональностью ваших стилей. Если вы решили изменить цвета после 2000 строки кода, а затем передумали на 3567 строчке, то будет чрезвычайно сложно исправить все цвета и документацию.
С LESS мы можем модифицировать и одновременно документировать наш рабочий процесс.

/* Colors for my Website */ @color-orange: #ff9900 ; @color-gray_light: #cccccc ; @color-black_dark: #333333 ; @color-black_medium: #454545 ; body { background : @color-black_dark; color : @color-black_medium; } a { color :@color-orange; } h1 , h2 , h3 , h4 , h5 , h6 { color : @color-black_dark; }

Область видимости переменных

Область видимости переменных описывает места, где они доступны. Если вы определите переменную в самом начале LESS файла, то она будет доступна для любого кода написанного после.
Также можно определять переменную внутри CSS правила. В этом случае переменные не будут доступны вне этого правила, они могут быть использованы локально.

a { @color : #ff9900 ; color :@color; } button { background : @color; }

В этом примере LESS не будет сконвертирован из-за ошибки, @color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально.

@color: #222222 ; a { @color : #ffffff ; color :@color; } button { background : @color; }

Переменные в переменных

Если вы кодили на PHP, то вы знаете что можно объявить имя переменной в другой переменной.

@color-chirstmas_red: #941 f1f ; @name-of-color: "color-chirstmas_red" ; color : @@name-of-color ;

Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого.

Константы и Переменные

Важно отметить, вопреки тому, что вы только что прочитали, переменные в LESS больше похожи на константы. Это значит, что они, в отличие от переменных, могут быть определены только один раз.

Операции

Вы можете добиться невероятно точного контроля с использованием операций в LESS. Идея проста:

.button { @unit : 3 px; border :@unit solid #ddd ; padding : @unit * 3 ; margin : @unit * 2 ; }

Код выше устанавливает переменную @unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два.
Можно использовать операции умножения, деления, сложения и вычитания. Что бы создать блок с рамкой увеличивающей ширину сторон по часовой стрелке, можно использовать следующий код:

.box { @base_unit : 1 px; border : @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 }

Управление цветом

Моя любимая особенность LESS – управление цветом. Можно использовать операции для смешивания цветов и несколько специальных функций для работы с цветом.

Цветовые операции

Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.

@color: #941 f1f ; button { background : #941f1f + #222222 ; border : #941f1f - #111111 ; }

Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ - более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.

@color-button: #d24444 ; input .submit { color :#fff ; background :@color-button; border :1 px solid @color-button - #222 ; padding :5 px 12 px; }

Цветовые функции

Есть гораздо больше возможностей для работы с цветом; LESS позволяет манипулировать ими на канальном уровне. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Взгляните на следующие примеры с картинками, чтобы понять, что каждый из них делает.

@color: #3 d82d1 ; .left_box { background :lighten(@color, 20 %) ; } .right_box { background :darken(@color, 20 %) ; }

Вложенность

Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:

article .post p { margin : 0 0 12 px 0 ; }

Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.
В LESS мы можем вложить эти правила, что даст нам более короткую и логичную версию наших стилей. Например:

Article.post { p{ margin: 0 0 12px 0; } a { color: red; } a:hover { color: blue; } img { float:left; } }

Отступы не обязательны, но они делают код более читабельным. Уровни вложенности не ограничены.

A { color:red; } p { margin:0px; } article { a { color: green; } p { color: #555; a { color:blue; } } }

Примеси (mixins)

Примеси в LESS избавят вас от набора излишнего кода. Вам когда-нибудь приходилось создавать закругленную рамку в которой только верхние углы скругленны?

.tab { -webkit-border-top-left-radius : 6 px; -webkit-border-top-right-radius : 6 px; -moz-border-radius-topleft : 6 px; -moz-border-radius-topright : 6 px; border-top-left-radius : 6 px; border-top-right-radius : 6 px; }

И так каждый раз… С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис.

Rounded_top { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .rounded_top; }

В вышеприведенном коде мы определили элемент.rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите.tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси.

Стили у элемента.submit - это скругленные углы наверху, белый цвет и красный фон (значение #333 переопределено).

Примеси с параметрами

Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 6px на верхних углах. А если мы захотим создать элемент с радиусом в 3px? Мы должны объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, мы должны использовать примеси с параметрами!
Они сходны с функциями, потому что при их вызове можно менять значения. Давайте перепишем пример с border-radius, чтобы посмотреть, как это работает.

Rounded_top(@radius) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab { background: #333; color:#fff; .rounded_top(6px); } .submit { .rounded_top(3px); }

В вышеприведенном коде радиус у.tab равен 6px, а.submit элемент получит значение 3px.

Стандартные значения

Если вы обычно используете одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение.

Rounded_top(@radius:6px) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .rounded_top(3px); }

В этом примере.tab получит стандартное значение в 6px, а.submit – 3px.

Множественные параметры

Вы также можете использовать множественные параметры, чтобы определить более сложные примеси.

Radius(@radius:6px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .button(@radius:3px, @background: #e7ba64, @padding: 4px) { .radius(@radius); background:@background; border: 1px solid @background - #222; padding: @padding; } .read_more { .button(0px); }

В этом примере класс.read_more отформатирован с отступом 4px, фоновым цветом #e7ba64 и с border-radius рывным 0px.

Используем все аргументы за раз

Еще одна опция при использовании аргументов это их объединение. Сокращённые свойства в CSS имеют множественные значения, записанные одно за другим.

div { border :1 px solid #bbb ; }

Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию:

Gray_border(@width: 1px, @type: solid, @color: #bbb){ border:@arguments; } div { .gray_border(2px, dashed); }

@arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет:

div { border :2 px dashed #bbb ; }

Параметрические примеси без параметров

Также можно использовать параметрические примеси без параметров. Это используется тогда, когда вам не нужно выводить примесь в CSS, но вы хотите чтобы ее правила применялись к элементу в котором она используется.

Alert { background: red; color: white; padding:5px 12px; } .error_message { .alert; margin: 0 0 12px 0; }

CSS вышеприведенного кода будет таким:

.alert { background : red; color : white; padding :5 px 12 px; } .error_message { background : red; color : white; padding :5 px 12 px; margin : 0 0 12 px 0 ; }

Чтобы скрыть класс.alert нужно установить пустой параметр.

Alert() { background: red; color: white; padding:5px 12px; } .error_message { .alert; margin: 0 0 12px 0; }

Готовый CSS будет следующим:

.error_message { background : red; color : white; padding :5 px 12 px; margin : 0 0 12 px 0 ; }

В основном это используется для уменьшения размера CSS файла.

Пространство имён

Пространство имён в языках программирования обычно используется для группировки сходных по функциональности элементов. Мы можем добиться подобного в LESS, объединяя наш код с помощью примесей.

#my_framework { p { margin: 12px 0; } a { color:blue; text-decoration: none; } .submit { background: red; color: white; padding:5px 12px; } }

Начиная работу над новым сайтом, основанным на вашем фреймворке, вы можете добавить связку #my_framework и использовать ее не засоряя пространство имён.

Submit_button { #my_framework > .submit; }

Также это отличный способ сделать возможным быструю смену и доработку тем. Если вы разрабатываете несколько тем для вашей компании, то для смены шаблонов на лету, вы можете поместить их все в один LESS файл, используя связки.

#fw_1 { p { margin: 12px 0; } a { color:blue; text-decoration: none; } .submit { background: red; color: white; padding:5px 12px; } } #fw_2 { p { margin: 8px 0; } a { color:red; text-decoration: underline; } .submit { background: blue; color: white; padding:8px 20px; } } .submit_button { #fw_2 > .submit; }

В итоге мы получаем возможность используя заранее заготовленные свои или фреймворка миксины ускорить написание верстки нашего проекта. Притом используя less — читаемость, структура и логика ваших стилей на порядок увеличивается, что улучшит поддержку сайта в будущем.