LESS в браузере, обработка на стороне клиента

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

LESS может использоваться как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js и Rhino.

LESS обеспечивает расширения CSS: переменные, вложенные блоки, миксины, операторы и функции.

 

Переменные Less

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

Пример использования переменных в Less:

@color: #4D926F; #header { color: @color; } h2 { color: @color; }

 

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

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

.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius; 
}
#header {
    .rounded-corners; 
}
#footer {
    .rounded-corners(10px); }

 

Вложенные правила

С помощью Less, возможно сократить запись стилей, используя вложенные правила:

#header { 
          h1 { font-size: 26px; font-weight: bold; } 
           p { font-size: 12px; 
               a { text-decoration: none; 
                   &:hover { border-width: 1px } 
                 } 
             } 
}

 
 

Функции и операции

В LESS можно использовать в качестве значений свойств не только константы, но даже выражения и функции! Можно производить арифметические операции, вызывать функции аналогично JS:

@the-border: 1px; 
@base-color: #111; 
@red: #842210;
 #header { 
                color: @base-color * 3; 
                border-left: @the-border; 
                border-right: @the-border * 2;
                }
 #footer {
                color: @base-color + #003300;
                border-color: desaturate(@red, 10%);
                }

 

Установка:
 

Загружаем файл JS с  офицального сайта. Так же есть возможно использовать файл без загрузки (с репозитория):

< script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js" >< /script >

 

Создаем: файл Style.less 

Подключаем к странице:

< !doctype html >
< hеad >
  < link rеl="stylesheet/less" type="text/css" href="style.less" >
  < sсript src="less.min.js" type="text/javascript" >< /sсript >
< /hеad >

Внимание! файл стилей должен быть подключён до файла JavaScript.
 

---

 

Библиотека MIXINS для LESS:

http://lesselements.com/