Язык less. Что такое LESS и как его использовать. Какой смысл использования препроцессоров

Прочие модели 15.04.2019

Прочие модели

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

LESS - это надстройка над CSS. LESS - это программируемый CSS. LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания и операции.

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

Как перейти на LESS?

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

После того, как стили сконвертированы в LESS, создаем соответствующий файл с расширением.less, например style.less .

Использование

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

Winless (OS: Windows)
LESS CSS Compiler (IDEA plugins)

Если вы используете среду разработки IDEA, то советую использовать плагин. При потере фокуса программы less будет компилироваться в css, это очень удобно 🙂

Когда есть понимание того, как работать с LESS, можно переходить к основным возможностям языка, ради которого стоит его использовать:

Переменные

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

LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } CSS #header { color: #4D926F;} h2 { color: #4D926F; } Mixins

Mixins (примешивания) позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.

LESS .box-sizing(@a: border-box) { box-sizing: @a; -webkit-box-sizing: @a; -moz-box-sizing: @a; } .wrapper { box-sizing; } CSS .wrapper { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } Вложенные правила

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

LESS .content { a { text-decoration: none; &:hover { text-decoration: underline; } } } CSS .content a { text-decoration: none; } .content a:hover { text-decoration: underline; } Операции

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

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

Определение

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

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

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

При помощи препроцессоров вы можете писать код, который нацелен на:

Читабельность для человека
Структурированность и логичность
Производительность

И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.

Синтаксический сахар

Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».

Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.

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

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

Какие бывают CSS-препроцессоры?

Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:

Sass (SCSS)
Stylus

И несколько незначительных для нас игроков:

Closure Stylesheets
CSS Crush

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

Какой смысл использования препроцессоров?

Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.

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

CSS — это сложно

Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.

Доступная документация

Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.

Простота использования

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

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

Структура и логичность кода

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

1. Родительский селектор 1.1. Вложенный селектор 1.2. Вложенный селектор 1.2.1. Вложенный селектор 1.3. Вложенный селектор

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

Примеси

Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.

Модульность

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

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

Почему бы не подождать развития CSS?

Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.

В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.

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

Разновидности препроцессоров

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

Sass (SCSS)
Stylus

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

Для полной картины, я хочу привести краткую справку по каждому препроцессору:

Less

Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, который основан на идентации. Считается устаревшим.
SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

Stylus

Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют: , ; , {} и некоторые скобки).

Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS .

Что такое LESS? LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в CSS. Он вводит переменные, операции, function-like элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.Как использовать LESS Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл. Не бойтесь слова «компилировать» (я постоянно его использую), это очень просто.Используем LESS и Javascript файл Для начала нужно скачать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт.

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

Удостоверьтесь, что вы прикрепили LESS файл перед JS.
Теперь LESS файл будет работать также как и обычный CSS.

Компилируем LESS файл Хотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл. Конвертеры: для Windows – Winless и LESS.app для Мака.Укрощаем мощь 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; } h1, h2, h3, h4, h5, h6 { 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: #941f1f; @name-of-color: "color-chirstmas_red"; color: @@name-of-color;
Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого.

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

Button{ @unit: 3px; border:@unit solid #ddd; padding: @unit * 3; margin: @unit * 2; }
Код выше устанавливает переменную unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два.
Можно использовать операции умножения, деления, сложения и вычитания. Что бы создать блок с рамкой увеличивающей ширину сторон по часовой стрелке, можно использовать следующий код:

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

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

@color: #941f1f; button { background: #941f1f + #222222; border: #941f1f - #111111; }
Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ - более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.

@color-button: #d24444; input.submit { color:#fff; background:@color-button; border:1px solid @color-button - #222; padding:5px 12px; }
Этот код создает красную кнопку с немного затемненной рамкой. Это частая ситуация и определение лишь одного цвета – большая помощь.

Мощь переменных более очевидна в следующем. Если вы захотели изменить цвет кнопки, то изменение значения @color-button на зеленый цвет, поменяет не только фоновый цвет, но и заменит обводку на более темный вариант зеленого.

Другое замечательное применение этого – создание градиентов. Я обычно выбираю средний цвет и объявляю градиент исходя из него. Я делаю начало немного светлее и конец немного темнее. Результатом будет приятный переход, что-то вроде этого:

@color: #faa51a; .button { background: -webkit-gradient(linear, left top, left bottom, from(@color + #151515), to(@color - #151515)); background: -moz-linear-gradient(top, @color + #151515, @color - #151515); }

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

@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 значение? Если вы нормальный человек, то вы не сможете с ходу расшифровать HEX цвет. HEX значения отображают RGB спектр: первые два символа контролируют количество красного, следующие два - количество зеленого и последние два – количество синего.
Достаточно очевидно, что #ff0000 это красный, так как это RGB(255,0,0). Тона красного, никакого зеленого и синего. Тем не менее, если вы увидите #1f6b2d, то будет трудно декодировать, что это темно-зеленый. В HSL представлении hue (тон) управляет всем, вы могли бы просто назвать цвет, остальное просто задаст тон (это не совсем верно, но всё происходит именно так).
Имея это в виду, если вы нашли хороший пурпурный цвет как #e147d4, вы очень легко можете отыскать различные цвета с точно таким же оттенком. Скажем, вы хотите создать сливочную, более пастельную версию #e147d4, вот что можно сделать:

Новый цвет будет иметь тот же тон, но другие насыщенность и яркость. Результатом будет #c480bf, к которому гораздо труднее перейти от #e147d4 используя лишь HEX.

Совмещение функций LESS позволяет использовать функции внутри функций, так, если надо обесцветить и перевернуть (spin) цвет, можно просто сделать так:

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

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

Article.post p{ margin: 0 0 12px 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: 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; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .rounded_top; }
В вышеприведенном коде мы определили элемент.rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите.tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси.

Примеси с параметрами Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 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:1px solid #bbb; }
Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию:

Gray_border(@width: 1px, @type: solid, @color: #bbb){ border:@arguments; } div { .gray_border(2px, dashed); }
@arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет:

Div { border:2px 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:5px 12px; } .error_message { background: red; color: white; padding:5px 12px; margin: 0 0 12px 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:5px 12px; margin: 0 0 12px 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; }

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

@url: "http://mycompany.com/assets/";background-image: url("@{url}/sprite.png");
Это может быть полезно при создании централизованного фреймворка.

Экранирование Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Вы могли заметить, что в примере про градиенты я не позаботился о пользователях Internet Explorer.
Если вы хотите создать градиент в 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 }

Чего не хватает? Несмотря на то, что LESS восхитительный, всё же когда вы начнёте использовать его, обнаружатся некоторые недостатки, хотя они не очень беспокоят.
Одна из особенностей, которую я хотел бы видеть, это пре-пре-обработка (согласен, звучит это бессмысленно).Помните, как строки могут быть экранированы, чтобы не проходить через анализатор? Текущий способ не позволяет использовать градиенты с изменяемыми цветами.

Filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#faa51a", endColorstr="#f47a20")";
Этот код прекрасно работает, но цвета должны быть жёстко определены. Если строчка экранирована, то переменные не обрабатываются. Было бы неплохо иметь опцию, в которой переменные в экранированных строках обрабатывались до отправки в CSS файл.

Заключение Как и с любой новой технологией или методом возникает злоупотребление. Помните отражающиеся логотипы и «стеклянные» кнопки на заре Web 2.0 эры?
Вы не обязаны вкладывать все ваши правила, вы не должны создавать переменные для всего или примеси просто для ширины рамки.
Если вы не знаете когда не использовать потрясающую мощь LESS, ваш LESS код станет таким же нечитаемым как обычный CSS и таким же сложным для поддержки. Фокус в том, чтобы знать, когда использовать данные функции и методы, а когда обычный старый CSS лучше.
В дополнение я советую не использовать LESS файл. В этом нет ничего плохого, но нет причины загружать LESS файл и обрабатывать его. Несомненно, скрипт очень быстрый, но я уверен что без него будет быстрее. Я обычно разрабатываю все мои сайты с 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)

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

И этот кусок кода нужно переписывать каждый раз, когда необходимо сделать такое закругление. Это можно упростить с помощью 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 уместен, он станет незаменимым и полезным инструментом.

В наше время не знать верстальщику что такое 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 лучше подходит для наших заголовков, то нам не нужно будет просматривать весь файл, мы просто изменим значение переменной.
Я нашел отличное применение переменным в определении цветов сайта. В старые добрые времена (которые были не так давно) я использовал что-то вроде этого:

Нет ничего плохого в том, чтобы документировать ваши цвета также как здесь, это хорошая практика, проблема заключается в том, что документация не имеет ничего общего с функциональностью ваших стилей. Если вы решили изменить цвета после 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 для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите.tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси.

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

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

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

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

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

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

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

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

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

В этом примере класс.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 файл, используя связки.

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

Язык less. Что такое LESS и как его использовать. Какой смысл использования препроцессоров

Рекомендуем почитать

Поиск по сайту