Less это язык динамических стилей План: Что такое less? Используем less и Javascript файл

/* 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”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.
Совмещение функций

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

.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 переопределено).

Заключение

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