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.

Она ходит меньше, чем следует.

CSS - это простой язык. Он позволяет нам задавать стили для HTML элементов с помощью селекторов. Это просто даже для начинающих.

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

В этом уроке мы объясним, что такое CSS-препроцессор и рассмотрим один из самых популярных: LESS.

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

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

LESS относительно новый препроцессор, ему около 4 лет. Его часто сравнивают с SASS, более старым препроцессором. Как и LESS, так и SASS, имеют свои корни в языке программирования Ruby, но в настоящее время используются гораздо шире. LESS теперь основан на Javascript.

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

Чтобы воспользоваться тем, что LESS может предложить, мы сначала должны сохранить наш CSS-код в файл с расширением .less . Использовать LESS очень просто. Он работает как на веб-сервере, так и на стороне клиента.

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

Некоторые из инструментов сторонних производителей:

• и многие другие...

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

#header {
background-color : #CCCCCC
}
.aside {
background-color : #CCCCCC ;
color : #000000 ;
.sidebar a {
border-bottom : 1px solid #CCCCCC ;
}

В LESS, мы можем просто объявить переменную для сохранения цвета, вот так:

@grey: #CCCCCC;

И затем повторно использовать это так:

#header {
background-color : @grey;
}
.aside {
background-color : @grey;
color : #000000 ;
}
.sidebar a {
border-bottom : 1px solid @grey;
}

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

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

Border_top_bottom {
border-top : dotted 1px #000 ;
border-bottom : solid 2px #000 ;
}

В приведенном выше коде мы определили верхнюю и нижнюю границу внутри класса border_top_bottom. Теперь, когда мы хотим добавить эти стили к другими элементами, мы можем использовать их так:

#header {
color : #000000 ;
.border_top_bottom;
}
.content a {
color : #000000 ;
.border_top_bottom;
}

Приведенный выше код выведет следующее:

#header {
color : #000000 ;

}
.content a {
color : #000000 ;
border-top : dotted 1px #000000 ;
border-bottom : solid 2px #000000 ;
}

Чтобы добавить больше гибкости, mixins также позволят нам передавать переменные (называемые здесь параметры). Например:

Border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

В приведенном выше примере, мы задали параметр для радиуса. Мы также дали ему значение по умолчанию равное 5px, которое не является обязательным. Теперь мы хотим добавить это для класса button:

Button {
.border-radius(6px ) ;
}

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

Одна из вещей, распространеных в CSS, это длинные селекторы, которые нам часто приходится писать для стилей дочерних элементов:

nav { }
nav li { }
nav li a { }
nav li a:hover { }
nav li a.active { }
nav li a.visited { }

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

nav {
li {
a {
& :hover { }
& :active { }
& :visited { }
}
}
}

Символ "&" используется перед псевдо-классами в нашей вложенной структуре. Описанную выше конструкцию гораздо легче понять и показать иерархию именно так, как она есть.

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

@padding: 5px;
h1 {
padding : @padding;
}
h1.page-title {
padding : (@padding * 2);
}

Значение по умолчанию будет умножено на 2, что задаст заголовку на главной странице padding равный 10px. Операции должны выполняться в круглых скобках, однако они могут также работать без скобок.

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

@var: red;

#page {
@var: white;

#header {
color : @var; // выведет white
}
}
#footer {
color : @var; // выведет red
}

Эта статья не охватывает все что LESS может предложить. Цель состоит в том, чтобы объяснить, как используя LESS можно помочь нам сделать наш CSS более динамичным. CSS препроцессоры позволяют нам создавать и управлять CSS более эффективно. Даже имея хорошее понимание CSS, LESS позволит нам использовать его более продуктивно.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

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

Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), но в данном уроке мы рассмотрим LESS .

На момент написания урока существовал единственный редактор, целиком посвященный работе с файлами LESS - ChrunchApp . Данное приложение кросс платформенное, построенное на Adobe Air , его можно запускать на Windows, Mac OSX and Linux.

Для других редакторов (таких как Dreamweaver, Coda, NotePad++ и SublimeText 2) существуют плагины или дополнения, которые позволяют организовать подсветку синтаксиса LESS.

Использовать LESS очень просто. Нужно просто добавить две строки в тег head вашего документа HTML. Первая строка содержит название вашего файла.less, а вторая строка - подключение библиотеки less.js (ее можно скачать с официального сайта).

В нашем уроке мы покажем другой способ. Мы будем использовать компилятор LESS: для Windows можно применять WinLess , а для Mac OSX - LESS.app .

Создаем файл.less в рабочей директории. Затем открываем компилятор (WinLESS или LESS.app) и импортируем рабочую директорию в него. компилятор найдет все файлы.less . И все. Теперь, когда бы мы не изменили файл.less , компилятор автоматически будет генерировать обычный код CSS в файл.css , который воспринимается браузером.

Остается только привязать CSS файл к документу HTML:

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

Сначала рассмотрим переменные .

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

Class1 { background-color: #2d5e8b; } .class2 { background-color: #fff; color: #2d5e8b; } .class3 { border: 1px solid #2d5e8b; }

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

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

@color-base: #2d5e8b; .class1 { background-color: @color-base; } .class2 { background-color: #fff; color: @color-base; } .class3 { border: 1px solid @color-base; }

В выше приведенном примере в переменной @color-base сохраняется значение #2d5e8b . И когда потребуется изменить цвет, то нужно будет поменять значение только в переменной.

В переменной можно использовать и другие значения:

@font-family: Georgia @dot-border: dotted @transition: linear @opacity: 0.5

В LESS можно использовать примешивания для хранения набора правил и применения их в других наборах. Например:

Gradients { background: #eaeaea; background: linear-gradient(top, #eaeaea, #cccccc); background: -o-linear-gradient(top, #eaeaea, #cccccc); background: -ms-linear-gradient(top, #eaeaea, #cccccc); background: -moz-linear-gradient(top, #eaeaea, #cccccc); background: -webkit-linear-gradient(top, #eaeaea, #cccccc); }

В Выше приведенном примере мы устанавливаем цвет градиента в классе.gradients . Затем, когда нужно добавить градиент, нужно просто вставить.gradients следующим образом:

Box { .gradients; border: 1px solid #555; border-radius: 3px; }

Класс.box наследует все объявления из.gradients . Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:

Box { background: #eaeaea; background: linear-gradient(top, #eaeaea, #cccccc); background: -o-linear-gradient(top, #eaeaea, #cccccc); background: -ms-linear-gradient(top, #eaeaea, #cccccc); background: -moz-linear-gradient(top, #eaeaea, #cccccc); background: -webkit-linear-gradient(top, #eaeaea, #cccccc); border: 1px solid #555; border-radius: 3px; }

При работе с CSS3 можно использовать библиотеку LESS ELements , чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например, border-radius , gradients , drop-shadow и так далее.

Чтобы использовать LESS нужно просто добавить правило @import файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.

@import "elements.less";

Теперь можно использовать все классы из elements.less . Например, чтобы добавить скругление углов рамки с радиусом 3px к элементу div , нужно написать:

Div { .rounded(3px); }

При работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:

Nav { height: 40px; width: 100%; background: #455868; border-bottom: 2px solid #283744; } nav li { width: 600px; height: 40px; } nav li a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; }

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

В LESS можно улучшить выше приведенный набор правил с помощью вложения наследников в родительский элемент:

Nav { height: 40px; width: 100%; background: #455868; border-bottom: 2px solid #283744; li { width: 600px; height: 40px; a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; } } }

Также можно использовать псевдо-классы, например:hover , с помощью символа амперсенда (&). Допустим, мы хотим добавить:hover к тегу ссылки:

A { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; &:hover { background-color: #000; color: #fff; } }

Также можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.

Допустим, что элемент B в два раза выше элемента A:

@height: 100px .element-A { height: @height; } .element-B { height: @height * 2; }

Сначала мы определяем переменную @height и назначаем ее для указания высоты элемента А.

В элементе В мы просто умножаем значение переменной на 2. Теперь, когда мы изменяем значение переменной @height , элемент В всегда будет в два раза выше.

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

Header { @color: black; background-color: @color; nav { @color: blue; background-color: @color; a { color: @color; } } }

В приведенном примере header имеет переменную для цвета со значением black , но фон элемента nav будет иметь цвет blue , так как переменная @color находится в локальном контексте.

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

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

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

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

@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; }

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

@color: #222222; a { @color: #ffffff; color:@color; } button { background: @color; }
Здесь ссылка будет окрашена в белый, а у кнопки будет черный фон.

@color-chirstmas_red: #941f1f; @name-of-color: "color-chirstmas_red"; color: @@name-of-color;
Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого.

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 }

@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: #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); }

@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%); }

@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.

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

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; } } }

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

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 { .tab; background: red; }
Стили у элемента.submit - это скругленные углы наверху, белый цвет и красный фон (значение #333 переопределено).

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.

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.

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; }

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 файла.

#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");
Это может быть полезно при создании централизованного фреймворка.

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 процессор и не будет выкинута.

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

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

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

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

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

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

Другими словами, CSS не хватает немного программирования и логики, чтобы сделать работу с ним более практичной. Хорошо, что для этого существует ряд инструментов, среди которых есть 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 . На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.

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

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

Каждый цвет в 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; } } }

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

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

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 уместен, он станет незаменимым и полезным инструментом.