Frontend — Javascript

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

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

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

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

Переменные:

Примеси:

Условия:

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

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

Эта лишь малая часть возможностей 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 и не париться. Хотя с условиями могут возникнуть проблемы.

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