Frontend — Javascript

Препроцессор LESS — динамический CSS

В этом скринкасте речь пойдет о сохранении вашего времени и нервов. А если быть более точным, то о препроцессоре css под названием LESS, и о том как при помощи его встроенных функций писать css красивее, быстрее и эффективнее.

Для того что бы работать с Less — необходимо скачать его с официального сайта http://lesscss.ru , и подключить как обычный файл со стилями, указав в атрибуте «rel» для тега «link» — «stylesheet/less», а затем подключить скрипт с самим Less. вот так:

[shell]
<link href=»styless.less» rel=»stylesheet/less» type=»text/css» /><script type=»text/javascript» src=»less.js»></script>
[/shell]

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

Переменные:

[shell]
@variable: #eac45b;

.class {
background: @variable;
}
[/shell]

Примеси:

[shell]
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

.div {
.rounded-corners(10px);
}
[/shell]

Условия:

[shell]
.rounded-corners (@radius) when (@radius > 5px) {
border: 1px solid #e4e4e4;
}
[/shell]

Вложенности:

[shell]
ul {
li {
a {
color: #e8e8e8;

&:hover {
color: #ccc;
}
}
}
}
[/shell]

А также множество вложенных функций работы с цветом, например:

[shell]
@color: #c4c4c4;

.div {
background: darken(@color, 10%); //возвратит цвет на 10% темнее чем @color
}
[/shell]

Эта лишь малая часть возможностей LESS. Для более подробных примеров, смотрите наш скринкаст.

Внимание! Less компилируется на стороне сервера. Встроенный компилятор есть только в FireFox последних версий. Поэтому что бы посмотреть результаты своей работы, необходимо залить файлы либо на сервер, либо установить локальный сервер, такой, например — http://open-server.ru/

Делись:

Оставь комментарий!

6 thoughts on “Препроцессор LESS — динамический CSS

  1. Ranerg:

    Очень полезный урок, много узнал из него:) Теперь точно буду пользоваться библиотекой Less:)

  2. Greed:

    А что у вас за редактор в этом видео, если не секрет?

    1. Александр Довженко:

      редактор php storme если я не ошибаюсь)

  3. Большое спасибо за урок. Очень хотелось бы, чтобы Вы его расширили. Больше функций, больше примеров, для усвоения. Кстати, я использую phpstorm + lamp и очень здорово все работает. ( это для ubuntu пользователей )

  4. Галина Желяпова Голубкова:

    спасибо!

  5. Максим Ливень:

    Можно, вроде, заранее скомпилировать css из less и не париться. Хотя с условиями могут возникнуть проблемы.

Добавить комментарий