LESS на стороне клиента

less

 

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

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

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


 

Переменные

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

 

Пример использования переменных в 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%);
}
 

less

 


Установка:

Загружаем файл 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/



Скажите спасибо - поделитесь:

 




Комментарии (0)