Краткий обзор отличий LESS от SASS

    Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.

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



    1. LESS — может client-side с использованием JS.



    Точнее он не то чтобы может, он на это и расчитан. Обычная практика использования LESS-кода:

    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="less.js" type="text/javascript"></script>
    


    Это потом уже к нему прикрутили возможность компиляции на сервере (и на js и на ruby).

    На первый взгляд какое-то странное свойство. Зачем компилить на стороне клиента, если можно отлично скомпилить на сервере и отдавать уже готовую ужатую CSS как мы привыкли с SASS?

    Причина становится видна после изучения невзрачных самых послених строках документации к LESS:

    @height: `document.body.clientHeight`;

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

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

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

    2. LESS, в отличии от SASS/SCSS не имеет логики.



    В LESS нет if/then, for и т.п. Хотя, учитывая то, что в него легко встраивается JS думаю логику вполне возможно прикрутить. Не пробовал.

    3. В LESS проще миксинг + миксить можно классы.



    Очень понравилось то, что в LESS можно включать в определение свойства других классов. Собственно класс и является миксином. Это еще одна особенность которой нет в SASS/SCSS. Вы можете включить в LESS обычный CSS файл и использовать его классы для определия своих свойств. Например:

    .wrap {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    }
    pre { .wrap }


    Резюме



    За исключением 1-го пункта разница не велика и выбор большена любителя.

    Лично для меня LESS выглядит более привлекательным из-за своей простоты. Циклы и условия в стилях мне еще никогда не были нужны. Классические утилиты типа «box-shadow, linear-gradient, darken' в LESS есть.

    Да, под SASS написано уже множество готовых библиотек (compass, bourbone и достаточно широкое сообщество), но под LESS есть тот же Twitter Bootstrap и этого более чем достаточно.

    P.S. Нашел старницу сравнения SASS vs LESS и вместе с ней открыл для себя любопытный сервис аргументированных сравнений wrangl.com
    Поделиться публикацией

    Похожие публикации

    Комментарии 48

      +3
      И правда любопытный сервис, wrangl.com, спасибо!
        0
        Где то пол года назад попробовал LESS, и влюбился в него, теперь верстаю только на нем.
          0
          У меня тоже складывается впечатление что LESS более гармоничный. А ты SASS/SCSS до этого пробовал?
            0
            ох, простите, ответ написал ниже. заработался, промахнулся…
          +4
          SASS тоже может использовать классы как mixin:
          @extend .class_name
            0
            Жаль его нельзя использовать при использовании амперсанда

            .block
            &_header
            @extend .headers

            Выдаст совсем не то что нужно, будем надеятся что позже исправят.
            Еще огорчает, что нельзя экстендить комплексные селекторы, типа
            @extend .block .block_header
              0
              Отступы парсер съел=(
            +1
            Слышал, видел, но сам особо с ними не работал, хотя некоторые друзья до сих пор на них работают. Наверно потому что не очень люблю подобные вещи, и особо их не кто и не навязывал.
            Но как то раз мне очень красочно расписали «LESS + Twitter Bootstrap», и уговорили попробовать нарисовать и сверстать 1 проект с их использованием. Все оказалось на столько просто и удобно…
              +1
              А почему ничего не сказано о LESS App ( incident57.com/less/ ), с помощью которой на Mac OS можно генерировать CSS из LESS, и использовать стили уже без js (т.е. как стандартный файл стилей)?
                0
                Использую SCSS как более функциональный, но LESS, действительно, очень нравится из-за возможности непосредственной прикрутки к сайту… Вообще только сейчас четта посетила мысля, которая раньше не приходила в голову. А почему бы не миксить оные решения. Т.е. определенную тяжелую, требующую повышенной функциональности, описываем на SCSS, а часть которая требует компиляции на стороне клиента — через LESS. Получится довольно таки интересная связка.
                  0
                  Компилятор less есть даже на php, правда он не все фичи поддерживает.

                  Хотя mixin мне кажутся интересным решением, но мне всегда почему-то казалось, что это как-то идеологически неправильно. Использование множественных классов и более стройной иерархии выглядит более правильным методом. Хотя могу и ошибаться.

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

                  А использование less.js выглядит очень странным — в случае отключенного/заблокированного js отвалятся и стили. Разумно разве что на сильно аяксовых приложениях, где наличие js — требование системы.
                    0
                    >А использование less.js выглядит очень странным — в случае отключенного/заблокированного js отвалятся и стили.

                    Но ведь при отключенном js отвалятся и генеренные на сервере стили?
                      0
                      С чего это вдруг? Если там на выходе стандартный css.
                        0
                        Да, сор, какое-то помутнение сознания было :)
                    0
                    Можно глупый вопрос? А зачем всё это? Чем вам обычный CSS-то не угодил?
                      0
                      Ну там на сайте написано, что умеет LESS, соответственно CSS всего этого не умеет :)
                        +1
                        Однажды подсев на SCSS, я уже не могу от него отказаться без каких-либо радикальных причин. Мой CSS-код стал гораздо более маштабируемым, легко изменяемым, структурированным. А самое главное резко возросла скорость его написания (за счёт mixin-ов, переменных и вложенности селекторов) и он стал мне приятен ;) Обычный CSS код мне никогда не нравился, из-за неудобного синтаксиса.
                        0
                        Пара вопросов к вам, как к уже частично разобравшемуся в обоих технологиях человеку:
                        1. есть ли в Less циклы, массивы? как то раз пришлось писать много однотипного css-кода, который было сложно оптимизировать вне css. Что-то вроде @for ( 'link', 'upload', 'media' ) as $name {...}. В документации к SCSS я не нашёл такой возможности.
                        2. насколько сильно тормозит компиляция на лету путём less.js больших CSS файлов? Я less не пробовал, но мне кажется, что на крупных проектах это будут существенные тормоза. Во всяком случае SCSS у меня компилируется около полу-секунды, не меньше.
                        3. Ещё интересует вопрос вложенных less файлов. В случае SCSS я имею целую кучу .scss файлов в удобном для меня расположении (модули, js-модули, баз.движок и пр.). Если я правильно понимаю философию Less, то мне придётся заставлять пользователя грузить все эти файлы, либо писать весь код в 1-ом или 2-ух файлах по старинке. Это так?
                        4. Ну и последний вопрос — насколько удобно устроена компиляция на сервере путём использования ruby? Это готовое приложение которое само в real-time режиме отслеживает все изменения в файлах и компилирует по мере необходимости (как в sass)? Или это что-то вроде API для написания своего кода на ruby?
                          +1
                          1. Циклов нет — я об этом написвл.
                          2. Насколько тормозит на крупных проектам самому интересно — более 10к less-файлы не пробовал, а они не тормозят.
                          3. Со вложенностью все также как и в scss — @import
                          4. Я даже незнаю как оно устроено — просто вместо sass-rails подключил less-rails в Gemfile и все.
                            0
                            2. Жаль, 10КБ маловато будет. Интересно как он себя поведёт при 70-170КБ
                            3. Пожалуй это серьёзный минус компиляции «на лету»

                            Исходя из вашей статьи, нисколько не жалею, что выбирая между LESS и SCSS, я выбрал SCSS.

                            Забыл к пред.комментарию дописать, что я использую SCSS вместо SASS по 2 соображениям:
                            1. он почти как CSS, проще адаптироваться команде
                            2. можно без изменений использовать обычный CSS-код (конечно, никто не мешает совмещать оба стиля, но каша же получится).
                              0
                              Отладочные данные самого less.js при ручном перезапуске, сырые 250кб ~ 1.25 секунды.
                              Это вместе с получением 4 файлов с сервера. Повторно они возьмутся из кеша.
                              Chrome 14 Win XP AMD Sempron 2600+
                              Плюс сам факт замеров снижает скорость.

                              Даже в таком диком синтетическом случае, на далеко не самом новом компе мы получаем вполне достойный показатель. Ведь если кеш чистый, то грузится будут всяческие скрипты, стили и изображения.
                                0
                                1.25 сек на быстром ПК в самом быстром браузере, по вашему, это достойный результат? Представляю сколько будет грузится такой файл в IE7 на слабой машине. Или как шустро он взлетит на планшете. Причём, если я правильно понял технологию, компилироваться файл будет для каждой страницы.
                                  0
                                  Спасибо, что вы такого высокого мнения о моём 6 летнем компе. Согласно некоторых правил учёта инвентаря, это утиль с отрицательной стоимостью.

                                  Дикий синтетический случай для эксплорера 8 показывает действительно очень плохой результат
                                  около минуты.
                                  Реальный файл стиля 828ms.
                                  Что касается планшетов, то боевые показатели на Enot V121 замерялись на глаз, но нареканий нет. Всё очень быстро.
                                    0
                                    6 лет, ИМХО, это относительно новый :) Не все же геймеры, да 3д дизайнеры. Итого, в случае Less, мы имеем:

                                    1. Существенные тормоза при загрузке страницы, если CSS файл большой. Причём тормоза никуда не исчезают при последующих загрузках страницы.
                                    2. Сумасшедшие тормоза в IE8 (а в IE6-7?).
                                    3. Необходимость содержать весь less-css код в 1 или нескольких файлах, что крайне неудобно для средне-крупных проектов.
                                    4. Меньше возможностей, чем у SCSS. Нет даже вложенности селекторов (ИМХО, самый главный минус CSS). Ну а про отсутствие логики…

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

                                    1. Можно не запускать в фоновом режиме компилятор
                                    2. Можно писать так: @height: `document.body.clientHeight`;

                                    Возникает резонный вопрос — зачем нужен Less? Ну а если рассматривать только серверную компиляцию, то особенно сильно встаёт пункт 4 — зачем использовать заведомо более слабый инструмент?
                                      0
                                      Вы бы сами потестировали, прежде чем пургу гнать, ниже по треду 2 ссылки на работающие сайты.
                                      Я 9 месяцев с этим работаю.

                                      1. Не просто большой, а невероятно синтетически раздутый. С реальным нормально.
                                      2. Да всё как обычно, анимация в jQuery тормозит посильнее.
                                      3. Кто вам такое сказал?
                                      4. Кто вам такое сказал?

                                      Верстальщик получает
                                      1. Отличный инструмент для разработки.
                                      2. Ещё несколько плюшек, которыми он может при желании воспользоваться потом, если захочет.
                                      3. Без какого либо дополнительного непривычного софта можно легко скопировать из браузера готовый CSS в CSS файл для сервера, если такое действительно понадобится, в моих случаях не было нужно, узкие места — это количество изображений на странице, но не генерация css из less файлов.

                                      Возникает резонный вопрос. Вы вообще зачем это пишете? Не осилил, не видел, не знаю, не понимаю, не сравнивал, но мнение безусловно надо высказать.
                                        0
                                        1) Я взял живой 170 Кбайтный css-код. Результат:

                                        1. Chrome — 0.4-0.6 сек
                                        2. Firefox — 0.5-0.8 сек
                                        3. IE 7 — 10+ сек
                                        4. Opera 12 — 24-27 сек

                                        2) Зачем вы сюда всё время приплетаете анимацию и загрузку картинкок. Less от этого меньше тормозить не будет. К тому же такие вещи, как анимация, вполне можно отключить для старых браузеров
                                        3) Собственно, а что не так? Каким образом клиентский-javascript может получить css-код из 20 файлов, не загружая 20 файлов? Или вы предлагаете шаманить на сервере?
                                        4) Сабж + этой

                                        По поводу вашего ответа на «верстальщик получает» — в чём преимущество перед SCSS(SASS)? Ещё просьба сбавить тон…
                                          0
                                          Opera 11.52
                                          раздутый 250 кб 10 секунд
                                          боевой вариант 300ms
                                          Кстати, если у вас Опера новая, то почему эксплорер старый? Уж не обманываете ли вы сами себя?

                                          2. Затем, что надо жить в реальности, а не заниматься преждевременной оптимизацией того, что работает на самом деле неплохо.
                                          3. Будет столько файлов, сколько надо, нет никакой необходимости отходить от привычного способа разделения файлов стилей. 20 или 4 — как захотите, на боевом сервере сожмёте.
                                          4. То есть вы не ходили на сайт с оф документацией и полностью возможностей Less не знаете, но выводы делаете? lesscss.org/#-nested-rules

                                          В чём преимущества говядины перед свининой?

                                          1 Нет нужды в дополнительном софте для обоих случаев
                                          2 Есть возможность отработать на клиенте. Возможность, подчёркиваю, а не необходимость.

                                          Ваша основная претензия, что клиентская обработка тормозит, так отвечаю
                                          1. Не так уж и тормозит
                                          2. По сравнению с некоторыми другими вещами совсем не тормозит.
                                          3. Даже если она будет тормозить, всегда есть возможность от неё отказаться. В конце концов, это инструмент разработчика.
                                            0
                                            IE старый потому что под него верстать надо. Что вы подразумеваете под боевым вариантом? Тот самый 11 КБ файл? Вот 170 КБ файл, пробуйте. Самый что ни на есть боевой.

                                            По поводу всего остального — facepalm.jpg. Если есть желание — можем продолжить «дискуссию» в личке.
                                        0
                                        Кстати, автор статьи ввёл вас в заблуждение.

                                        line-height:`1+Math.random()`;

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

                                        Рендеринг на клиенте — это достоинство, которым надо пользоваться с умом. А его недостаток — прямое продолжение этого достоинства.
                                        Не хотите — не пользуйтесь.
                                        Но если вам понадобится красивое решение для реализации цветовых схем на стороне клиента на основе времени суток/времени года/сессионной куки, то less если не решение, то образец реализации.
                                        Или локализация свойства content для псевдоэлементов.

                                        Оцените такой трюк.
                                        #container{
                                        #center {
                                        float: left;
                                        width: 100%;
                                        body.sidebar-first {margin-left: (0-@sidebarLeftWidth);}
                                        body.sidebar-second {margin-right:(0-@sidebarRightWidth);}
                                        body.two-sidebars {margin: 0 (0-@sidebarRightWidth) 0 (0-@sidebarLeftWidth);}
                                        }
                                        }

                                        Надеюсь, семантика всплывающего селектора понятна. Элемент body никогда не будет внутри селектора, только в его начале.
                                        Правда это личная наработка. Надо бы её закоммитить.
                                          0
                                          > реализации цветовых схем на стороне клиента на основе времени суток/времени года/сессионной куки

                                          Если цветовых схем не много, то, ИМХО, проще реализовать доп.классом и цветной математикой. В SCSS для этого есть циклы.

                                          > Или локализация свойства content для псевдоэлементов.

                                          Не так давно это обсуждалось на хабре. Да, на лету будет несколько проще, но, ИМХО, это весьма сомнительная затея.

                                          Касательно вашего трюка — непонятно откуда берутся @sidebarLeftWidth и пр.? Если это просто переменные, то чем хуже вариант:
                                          #container #center {
                                            float: left;
                                            width; 100%;
                                            
                                            body &.sidebar-first { margin-left: $sidebarLeftWidth; }
                                            ...
                                          }
                                          


                                          Или я вас не правильно понял?
                                            0
                                            Цвет и локализация — это один из способов применения. Не более того.
                                            Однако, дополнительных классов не оберётесь, если захотите дать возможность выбрать любые 4 цвета, а на основе них рассчитать остальную схему. И всё это на клиенте, серверная сторона не страдает и кешированное отдаётся в прежнем виде.

                                            Трюк в том, что классы проставляются корневым элементам. А уже потом конкретные элементы темизируются относительно того, какой класс у корневых.
                                            компилируется это в
                                            body.sidebar-first #container #center{margin-left: (0-@sidebarLeftWidth);}
                                            а не в
                                            #container #center body.sidebar-first{margin-left: (0-@sidebarLeftWidth);}

                                            Особенно удобно, если надо подправить что-то для 7-8 ie.
                                              0
                                              Т.е. вы имеете ввиду это:
                                              // пример
                                              #some { 
                                                color: orange;
                                                body.my_super_duper_class & { color: red; } 
                                              }
                                              =>
                                              #some { color: orange; }
                                              body.my_super_duper_class #some { color red; }
                                              

                                              Этот метод очень удобный и я активно его эксплуатирую везде где только можно. Самое простое — добавлять к тегу body класс с именем браузера, с именем браузера и целочисленной частью версии.
                                                0
                                                Именно так. Но подобная запись на мой взгляд избыточна.
                                                body и html всегда будут вначале, кроме того части селектора с этими тегами надо сливать.
                                                html.front.ua-ie-7
                                                  0
                                                  В смысле избыточна? 1 символ избыточен? :) Я полагаю, что его отсутствие — алогично. Совсем не обязательно, что в префиксе будет указаны теги html или body.

                                                  К тому же, исходя из этой статьи в less нельзя записать:
                                                  a {
                                                    color: red;
                                                    &:hover { color: orange; }
                                                  }

                                                  С момента написания этой статьи такая возможность появилась? В SCSS символ & обозначает текущий селектор. А вот в вашем примере я долго не мог понять, каким образом less определит, что префикс это префикс, а не суффикс…
                              0
                              Меня вот тоже интересует вопрос производительности.
                              Есть ли у кого примеры реальных проектов написанных с использованием таких технологиях?
                                0
                                > с использованием таких технологиях

                                Вы про less или и про обе технологии? При использовании SCSS(SASS) проблема производительности не стоит, ибо файл компилируется только при изменениях, либо вручную.
                                  0
                                  Понял, сори. Я имел ввиду less.
                                  0
                                  Есть, например, brandoholic.com.ua/ и www.babysuper.ru/
                                  11 и 18 кб соответственно
                                  Оба файла предварительно обфусцированы.
                                  Скорость можете замерить. Заодно обратите внимание, что происходит при достройке/расстановке классов в document.ready, по сравнению с этим, Less как метрополитен, стремителен и незаметен на поверхности.
                                  +1
                                  1. Sass так умеет
                                  @each $name in link, upload, media {
                                    .#{$name} {
                                      ...
                                    }
                                  }
                                  
                                  +2
                                  По сути оба проекта делают одно и тоже и фундаментальных различий не имеют.
                                  Самый главный аргумент в сторону LESS — парсинг стилей яваскриптом непосредственно в броузере пользователя, имхо вещь весьма сомнительная — ведь мало кто захочет замедлять скорость отклика страницы пользователя ради вещей, которые можно получить и другим путём.
                                  А вот больший функционал SASS аргумент более весомый, и пусть что-то из этого функционала вам сейчас не нужно, но потенциально вы сможете с SASS сделать больше. Плюс на выбор синтаксис со скобками или синтаксис с отступами — очень серьёзный довод для тех, кто используют питон или пишут шаблоны на HAML/Slim.
                                  И самый последний аргумент — Rails 3.1 с SASS по дефолту. Имхо это для многих не определивщихся, или только желающих попробовать, положит конец эпопеи LESS vs SASS.
                                    0
                                    Абсолютно верно. Кроме одного момента — возможности предоставляемые рендерингом на стороне клиента нельзя получить другим путем, тот-же SASS никак не сможет учитывать в стилях размер видимой области. Нужно ли вам это в проекте это уже другой вопрос.

                                    Насчет замедления отклика — интересно было бы узнать насколько она реально замедляется.
                                      0
                                      11 килобайт — полёт нормальный.
                                      Есть более другие вещи, которые затормозят отклик страницы. А когда дело дойдёт до полной оптимизации, никто не помешает вам заменить исходный less файл на его css вывод.

                                      Лично для меня убер фичей является совместимость с css.
                                      Пусть IDE расставляет отступы, когда я буду копировать куски стилей из старого проекта, из аськи, из интернета, а я буду следить только за парностью скобок.
                                      +1
                                      SASS + Сompass наше все.
                                      Есть на компасе кстати сборка html5 boilerplate
                                        +1
                                        + к компасу прицепляется CSS3 PIE
                                          0
                                          А в чем прикол бойлерплейта?
                                            0
                                            Хороший шаблон для версти html5 сайтов уже сегодня

                                            В день когда решили, что доктайп у нас будет <!DOCTYPE html>взяли его за основу
                                          +1
                                          Только Stylus! learnboost.github.com/stylus/
                                            +2
                                            Есть ещё сравнение LESS и SASS от разработчиков Compass: gist.github.com/674726

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое