MaxSite.org 11 лет
Блог вебмастера о сайтостроении
Внимание! Данная запись отмечена как устаревшая и может содержать неточную или неактуальную информацию!

Почему нужно изучать LESS

CSS, HTML, LESS, SASSПросмотров: 14782 (235)

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

Почему нужно изучать LESS? Можно, конечно, гордиться, что хороший верстальщик может нагенерировать десятки килобайт кода в день, но логичней было бы уточнить: а насколько зависит объем кода от объёма выполненной работы?

Использование миксов значительно упрощает код

Простой пример: нужно сделать скругление углов. В CSS3 для этого всего используется лишь одна строчка:

.border_radius {
    border-radius: 5px;
}

Но мы то знаем, что нужно обеспечить поддержку разных браузеров, а значит код превращается, как минимум в:

.border_radius {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Объём кода увеличился в три раза (с 37 симолов до 90). Теперь, предположим, что скругление нужно задать сразу у нескольких css-классов. Объем кода увеличивается лавинообразно, хотя всё, что нам нужно - это по сути одна строчка с border-radius.

LESS позволяет полностью исключить подобную рутину. Один раз нужно лишь задать микс (примесь, mix, mixin):

.border_radius(@radius)
{
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

И используем его не загромождая свой код:

div.leave_a_comment {
    .border_radius(8px);
}

Совершенно замечательное упрощение синтаксиса ощущается в более сложных миксах, например при задании линейного градиента (linear-gradient). Микс там получается внушительный и набирать его вручную (копировать из своих заготовок) будет довольно утомительно, не говоря уже о том, что при ручной вставке можно наделать кучу ошибок.

Итак, LESS позволяет значительно сократить css-код за счет использования миксов и забыть о кроссбраузерных префиксах.

Улучшенный синтаксис

С помощью LESS написание CSS-кода упрощается, поскольку в нём поддерживается вложенность набора правил.

div.footer {
    background: #444;
    color: white;
    
    a {
        color: white;
    }
}

Читается на интуитивном уровне. В итоге в CSS получится так:

div.footer {
    background: #444;
    color: white;
}
 
div.footer a {
    color: white;
}

То есть с LESS объём кода меньше (написать его быстрей) и он гораздо лучше читается. Ну и очень удобно в LESS сразу видеть вложенность html-тэгов. И если нужно вдруг добавить новое правило, то нет больше необходимости копировать класс родителя.

Корректный результирующий CSS-код

Если мы говорим о компиляции less-файла в css-файл, то в результирующий css-код не попадут пустые css-правила. Это очень удобно, поскольку можно в less-файле использовать заготовки правил «впрок» и, если они не нужны, проcто их закомментировать или оставить пустыми. Например у меня есть такая заготовка:

div.widget {
     
    // wrap-блок виджета
    div.w0 {
     
    }
     
    // заголовок виджета
    div.widget_header,
    h2.box {
         
    }
}

Можно не беспокоиться: в css-код он не попадёт.

Обратите внимание на комментарии, начинающиеся с «//». Все они будут удалены компилятором LESS. А вот обычные css-комментарии «/* */» останутся. Удобно? Безусловно!

@Переменные и операции

Стоит ли говорить насколько упрощается жизнь верстальщика при использовании переменных? Вместо поиска и замены одного цвета на другой - указываем значение только в переменной. И если цвет ещё более-менее просто заменить, то что касается размеров блоков, то уже придётся заново всё пересчитывать.

У меня, например есть микс .model(), в котором задаётся модульная сетка шаблона. В основном less-файле я указываю, скажем, так:

.model(1020px, 270px);

В миксе модели все ширины блоков высчитываются автоматически. Вот пример готового микса:

.model(
        @content_width: 960px, // общая ширина сайта
        @sidebar_width: 250px, // сайдбар
    )
{
    div.header {
        div.header-wrap {
            width: @content_width;
            margin: 0 auto;
        }
    }
 
    div.main {
        div.main-wrap {
            width: @content_width; 
            margin: 0 auto; 
        }
    }
 
    div.content {
        width: @content_width - @sidebar_width; 
        margin: 0 @sidebar_width 0 0; 
        float: left;
 
        div.content-wrap {
            margin: 20px 30px 10px 20px;
        }
    }
 
    div.sidebar1 {
        width: @sidebar_width; 
        float: right; 
        margin: 0 0 0 -@sidebar_width;
        
        div.sidebar1-wrap {
            margin: 20px 10px 0 0;
        }
    }
 
    div.footer {
        div.footer-wrap {
            width: @content_width - 20px; 
            margin: 0 auto; 
            padding: 10px; 
        }
    }
    
} // .model

Сколько мне потребуется времени, чтобы произвольно изменить ширину сайдбара или сайта? :roll:

Простой код - высокая читабельность

У меня есть микс, с помощью которого я задаю параметры шрифта. Сами по себе правила простые и несложные. Например так:

h1 {
    font-weight: bold;
}

Просто? Безусловно. Но, вот так немного удобней:

h1 {
    .bold;
}

Пример хорошо показывает, что даже для таких простых css-правилах можно немного упростить себе жизнь. В CSS и HTML очень много нелогичных моментов, скажем, почему для курсива нужно использовать font-style, а для подчеркивания text-decoration?.. Вот для таких случаев можно сделать разные миксы, более логично сгруппированные.

Приведу свой микс .font(). Возможно он вам тоже пригодится.

.font()
{
    .verdana()
    {
        font-family: Verdana, Arial, Helvetica, sans-serif; 
    }
    
    .arial()
    {
        font-family: Arial, Helvetica, Verdana, sans-serif; 
    }
    
    .georgia()
    {
        font-family: Georgia, "Times New Roman", serif; 
    }
    
    .times()
    {
        font-family: "Times New Roman", Georgia, serif; 
    }
    
    .segoe()
    {
        font-family: "Segoe UI", Verdana, Arial, sans-serif; 
    }
    
    .size(@size: 9pt)
    {
        font-size: @size;
    }
    
    .normal()
    {
        font-weight: normal;
    }    
    
    .bold(@bold: bold)
    {
        font-weight: @bold;
    }
    
    .color(@color)
    {
        color: @color;
    }
    
    .i()
    {
        font-style: italic;
    }
    
    .style(@style = normal)
    {
        font-style: normal;
    }
    
    .upper()
    {
        text-transform: uppercase;
    }
    
    .lower()
    {
        text-transform: lower;
    }
    
    .underline(@underline: underline)
    {
        text-decoration: @underline;
    }
        
} // .font

Пользоваться например так:

h1 {
    .font > .arial;
    .font > .size(18px);
    .font > .color(red);
    .font > .upper;
}

Теперь можно забыть чем отличается font-style от text-decoration. :coolsmile:

Обратите внимание, что микс .font использует вложенные правила в своём Namespaces (пространство имён). Это несколько усложняет синтаксис вызова (используется «>»), но с другой стороны, в любой момент в микс можно добавить новые правила, которые не повлияют на предыдущие (ООП-программистам привет!).

Less-фреймворки

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

С чего начать изучение LESS?

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

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

Ну и безусловно стоит воспользоваться поиском гугла на фразу «less mixins». Найдёте очень много интересных и готовых решений.

Комментариев: 7 RSS

1Dimox22-06-2012 18:36

Как по мне, так все эти Лессы и Сассы и т.п. только все усложняют. Во-первых, нужно запоминать, по сути, еще один язык разметки, (т.е. весь этот синтаксис). Во-вторых, какая-то еще там компиляция файлов нужна. В общем, ужас просто. Я считаю, это не истинный путь верстальщика.

Мне достаточно сокращений в стиле Zen Coding. С ним я верстаю не медленнее, чем если бы использовал LESS.

2MAX22-06-2012 18:40

Ну правильно: ты же под WordPress делаешь, а там нет компилятора LESS, поэтому и нужно думать как его подключить. ;-)

3Dimox22-06-2012 18:47

Ну я еще и просто в HTML верстаю, не только под WordPress.

4MAX22-06-2012 19:27

В любом случае с помощью LESS верстка проще и интуитивней. Выучить переменные и примитивные миксы - дело 5 минут. Другое дело как подключить компилятор. В MaxSite CMS готовы все файлы, поэтому нет проблем. Ну а для других CMS я рекомендую воспользоваться WinLESS.

Думаю, что такой профессионал, как ты, без проблем освоит LESS очень быстро. Нужно просто попробовать. :)

5jimmy jonezz22-06-2012 20:55

Информация к размышлению: http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-

6dignityinside22-06-2012 22:24

Спасибо Макс, почитал, интересно! Давно хотел узнать что за зверь. Как будет немного времени, постараюсь поробовать...

7Сергей31-05-2013 15:30

Странно, а у меня не отображаются никакие комментарии, в том числе и вида /* */

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

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.