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

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

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

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

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

.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; }

.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 стили страницы, а далее банально к ним обращаться. Главное преимущество этого подхода к верстке страниц в том, что в любой момент, достаточно изменить всего лишь одну строчку кода, для изменения всей страницы или сайта.

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;
}

@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? Здесь основные стили можно вынести в классы, а далее присваивать их к нужным элементам.

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;
}

.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%);

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

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.

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