Почему стоит использовать LESS при верстке сайта?

Очень долгое время я использовал при верстке сайтов только голый CSS. Но с опытом становится очевидно, что стандартный CSS пожирает очень много времени и внимания, а зачастую представляет из себя мусорную корзину, где один класс наслаивается на другой и при продолжительной поддержке сайта, особенно если изменения вносятся не одним человеком - оригинальные файлы .css превращаются в ужас на крыльях ночи, где не разберется и сам черт.

Я долго присматривался к LESS и где-то полгода назад все таки решил попробовать его в работе. Передо мной стояла задача следующая, я разрабатывал шаблонные сайты и очень хотел чтобы мои "шаблонники" могли менять все свои цвета и фоны, без лишней груды мусора в CSS коде. Позже, я, конечно, пожалел что не начал пользоваться сей замечательной надстройкой раньше.

Результаты меня очень порадовали! LESS это ЗБС! Задача решилась слишком даже легко: ранее, чтобы добавить возможность смены цвета для всего шаблона, писался отдельный многострочный .css файл где шли соответствующие замены и т.д. А с использованием LESS, задача решилась в 5 строк) Я задавал основные цвета на которые хочу менять цвет, и просто запускал цикл в ходе которого, весь этот мусорный код генерируется сам, без участия пальцев.

Что нужно знать о LESS? Во первых, LESS это ЗБС!

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

Например, возьмем стандартный код CSS:

.one.left { width: 495px; } .one.right { width: 462px; } .one.left .descr { width: 321px; } .one.right .descr { width: 288px; } .one .img { width: 174px; } .one .title { font-size: 28px; } .one .descr .text { font-size: 15px; } .one .descr .text span { font-size: 20px; }

А так это выглядит в LESS:

.one { &.left { width: 495px; .descr { width: 321px; } } &.right { width: 462px; .descr { width: 288px; } } .img { width: 174px; } .title { font-size: 28px; } .descr .text { font-size: 15px; span { font-size: 20px; } } }

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

Далее, что так же не перестает меня радовать, это переменные, в которые можно внести все основные CSS стили страницы, а далее банально к ним обращаться. Главное преимущество этого подхода к верстке страниц в том, что в любой момент, достаточно изменить всего лишь одну строчку кода, для изменения всей страницы или сайта.

Как это в голом CSS:

body { font-family: 'pf_din_text_cond_proregular', Arial, Tahoma, Helvetica, sans-serif; color: #606366; } h1,h2,h3,h4,h5,h6 { color: #dc3c3c; font-family: 'pf_din_text_cond_promedium', Tahoma; }

Создаем переменные в LESS:

@fontRegular: 'pf_din_text_cond_proregular', Arial, Tahoma, Helvetica, sans-serif; @fontBold: 'pf_din_text_cond_promedium', Tahoma; @defColor: #606366; @hColor: #dc3c3c; body { font-family: @fontRegular; color: @defColor; } h1,h2,h3,h4,h5,h6 { color: @hColor; font-family: @fontBold; }

И далее по всему коду, к этим переменным можно обращаться постоянно. Захочется изменить какой-то цвет? Не нужно будет лазить по всему .css файлу, а достаточно заменить одну строчку.

Стоит отметить так же и наследование классов. Каждый раз когда стили элементов повторяются на странице, например в CSS делается что? Правильно тупое копирование одинаковых участков кода. А что позволяет LESS? Здесь основные стили можно вынести в классы, а далее присваивать их к нужным элементам.

Как делаем в CSS:

input[type="text"] { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; } .str .one { border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; } .pagination ul li { border-radius: 13px; -moz-border-radius: 13px; -webkit-border-radius: 13px; -khtml-border-radius: 13px; }

А в LESS присваиваем нужный класс оформления:

.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; -khtml-border-radius: @radius; } input[type="text"] { .border-radius (5px); } .str .one { .border-radius (7px); } .pagination ul li { .border-radius (13px); }

Это восхитительно!) Прямо так и хочется устроить обнимашки с LESS кодом или даже угостить чем-нибудь крепким с блек-джеком и шлюхами.

На этом прелести не заканчиваются, LESS позволяет очень доступно манипулировать цветом, что делает эту надстройку действительно очень гибкой. Например можно немного осветлить цвет:

lighten(#000, 20%);

Более подробно о манипулировании с цветом читайте здесь, функций там подобных море.

Ладно, итак что нужно чтобы начать пользоваться LESS?

1. создать файл с именем типа template.less
2. подключить его в хедере страницы:
   Код

   <link rel="stylesheet/less" type="text/css" href="/assets/css/template.less">

3. подключить в хедере js файл:
   Код

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

Для начала, вполне сойдет.

А вот несколько сервисов, которые за полторы секунды превратят старый и грязный CSS в более приятное и покорное LESS.

• css2less.cc
• leafo.net/lessphp/lessify/

Естественно, что на рабочих проектах использовать LESS не стоит, для лучшей производительности нужно использовать компиляторы в голенький CSS, например:

• less2css.org
• webtoolkitonline.com/less-to-css.html

Ну а на modx revolution, стоит воспользоваться замечательным компонентом MinifyX.