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

По своей сути переменные в LESS это ничто иное, как обычные константы. Но да шут (фиг и т.д.) с ними. Решил создатель леса сказать что это переменные — будут переменные, но мы то знаем, что это константы. По опыту работы все эти константы действительно становятся раз в месяц переменными, т.к. редко какой сайт мы сделали и забыли и постоянно вносим правки.

Переменные нам нужны для того, чтобы определить их в одном месте, а затем использовать их в любом другом месте нашего стиля.
Например, создав переменную @green: #0a3; Мы можем потом использовать эту переменную в значениях таких свойств, как цвет текста, цвет фона, рамки, градиента и еще чего-нибудь.
Все, кто слушает мои «лекции» про LESS, сразу начинают говорить, что зачем везде писать @green если проще написать #0a3?
Объясняю: @green — очевидная переменная, #0a3 — абсолютно неочевидное значение. Конечно ясно, что это какой-то цвет, но коллеги, кто из вас на лету скажет, что за цвет #84ccf9? А переменная @blue — вполне понятна.

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

LESS

@green: #0a3;
 @blue: #84ccf9;
 @darkBlue: @blue - #222; /* 84ccf9 - 222222 = 62aad7 *- см. примечание */
 @small: 10px;
 @normal: 16px;
 @big: 24px;

 header {
 h1 {color: @green; border: @small solid @green; font-size: @big; padding:@normal;}
 p {color: @blue;font-size: @small;
 &:first-letter {color:@darkBlue; font-size: @normal;}
 }
 }

Примечание: ff+11=ff f0+11=ff, т.к. в hex максимальное значение ff (с минимумом тоже самое) сколько вы не прибавляйте (отбавляйте) — 00-min ff-max

CSS

header h1 {color: #00aa33; border: 10px solid #00aa33; font-size: 24px; padding: 16px;}
 header p {color: #84ccf9;font-size: 10px;}
 header p:first-letter {color: #62aad7; font-size: 16px;} 

Можете злорадствовать, противники, что тут кода LESS гораздо больше, но когда вы накатаете портянку на пяток пэйдждаунов и вам прийдется вставить в какое-либо свойство значение зеленого цвета, то не прийдется скроллить вверх для поиска этого цвета, а просто написать @green (Если вы писали CSS-портянки, тогда вы отлично понимаете о чем я).

А, например, как вам такие переменные:

@sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 @serif: Georgia, 'Times New Roman';
 @mono: Monaco, Courier,'Courier New';

Согласитесь, такие переменные, необходимы.

body {font-family: @sans;}
 blockquote {font-family: @serif;}
 code {font-family: @mono;} 

Особенно удобно, работая с LESS, объявить все переменные в одном файлике, не путая его со стилями.

Если я вас еще не убедил, то перейдем к следущему этапу — примешиванию.