SASS против LESS

Original author: Chris Coyier
  • Translation
«Какой препроцессорный язык стоит использовать для CSS?» является очень актуальным вопросом в последнее время. Несколько раз меня спрашивали об этом лично, и казалось бы, каждые пару дней этот вопрос поднимался в сети. Очень приятно что беседа перешла из темы о плюсах и минусах препроцессинга к обсуждению какой же язык является лучшим. За дело!

Если быть кратким: SASS.

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

Развернутый ответ: ниже

График обучения с Ruby и командной строкой

Единственным пунктом является синтаксис. Для компиляции созданных вами файлов стоит использовать такое приложение как CodeKit. Вы должны знать основы Ruby или командной строки или еще чего-то другого. Наверное вам стоит это знать, но не обязательно, так что это не играет большой роли.

Победитель: нет.

В помощь CSS3

С любым из языков вы можете создавать собственные примеси для упрощения жизни с префиксами. Так что здесь нет победителя. Но знаете ли вы как сделать так, чтобы не обновлять эти префиксы во своих своих проектах? (Нет, не знаете). Также вам, скорей всего, не придется обновлять ваш собственный файл с примесями. SASS позволяет использовать Compass, благодаря автообновлениям которого вы можете забыть о проблемах с префиксами. Конечно же вы можете обновлять программное обеспечение и время от времени его компилировать, но это тривиальная задача и не стоит на этом зацикливаться.

Так что все это сводится к следующему: у SASS есть Compass, а у LESS его нет. На самом деле все немного запутанней. Все попытки создать проект типа Compass для LESS потерпели неудачу. Дело в том, что LESS не является достаточно сильным языком, что бы сделать это корректно. Немного подробней будет ниже.

Победитель: SASS

Способности языка: логика/циклы


LESS позволяет создавать «защищенные примеси». Эти примеси вступят в силу только в случае если условие верно. Допустим вы захотите поменять цвет фона, который будет зависеть от текущего цвета текста. Если цвет текста «достаточно светлый» вы, наверное, захотите сделать темный фон. Если же он «достаточно темный» — вы захотите светлый фон. Таким образом у вас получится примесь, разбитая на две части с этими «защитниками», которые гарантируют что только один из них будет исполнен.

LESS
.set-bg-color (@­text-color) when (lightness(@­text-color) >= 50%) {
  background: black;
}
.set-bg-color (@­text-color) when (lightness(@­text-color) < 50%) {
  background: #ccc;
}

После использования вы получите подходящий фон:

LESS
.box-1 {
  color: #BADA55;
  .set-bg-color(#BADA55);
}

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

LESS
.loop (@­index) when (@­index > 0) {
  .myclass {
    z-index: @­index;
  }
  // Call itself
  .loopingClass(@­index - 1);
}
// Stop loop
.loopingClass (0) {}

// Outputs stuff
.loopingClass (10);


На этом логика/циклы в LESS и заканчиваются. SASS обладает актуальными логическими и циклическими операторами. if/then/else, цикл for, цикл while и цикл each. Без каких либо трюков, настоящее программирование. SASS является достаточно надежным языком, что делает возможным использование Compass.

Например, у Compass есть примесь background, которая является настолько мощной, что вы можете положить в нее все что захотите и в итоге получите именно то, что вам нужно. Картинки, градиенты и любая их комбинация, разделенная запятой — и вы получаете нужный результат (включая префиксы и все прочее).

Лаконичный кусок кода:

SCSS
.bam {
  @­include background(
    image-url("foo.png"),
    linear-gradient(top left, #333, #0c0),
    radial-gradient(#c00, #fff 100px)
  );
}

Превращается этот код в монстра ниже (который, к сожалению, нужен в целях кроссбраузерности):

CSS
.bam {
  background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
  background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}

Победитель: SASS

Сайты


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

Победитель: LESS

@­extend концепция


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

LESS
.module-b {
   .module-a(); /* Copies everything from .module-a down here */
   border: 1px solid red;
}

По сути это обычный «include». Вы также можете использовать эту вставку и в SASS, но лучше это делать используя @­extend. @­extend не просто копирует стили из .module-a в .module-b (что производит к раздуванию файла), он меняет название селектора .module-a на .module-a, .module-b в скомпилированном CSS (что является более эффективным способом).

SCSS
.module-a {
   /* A bunch of stuff */
}
.module-b {
   /* Some unique styling */
   @­extend .module-a;
}

Компилируется в:

CSS
.module-a, .module-b {
  /* A bunch of stuff */
}
.module-b {
  /* Some unique styling */
}

Вы это видите? SASS переопределяет селекторы, и это более эффективный путь.

Победитель: SASS

Обработка переменных


LESS использует @, SASS использует $. Знак доллара не используется в CSS, чего нельзя сказать про @. Он используется для объявления @­keyframes или блоков @­media. Вы можете считать что использования того или другого спецсимвола это дело вкуса, но я думаю что SASS имеет здесь преимущество именно за счет того, что не путает базовые концепции.

SASS имеет странное свойство — если вы переопределите «глобальную» переменную «локальной», глобальная переменная примет ее значение. Немного странно.

SCSS
$color: black;
.scoped {
  $color: white;
  color: $color;
}
.unscoped {
  // LESS = black (global)
  // SASS = white (overwritten by local)
  color: $color;
}

Это трюк может быть полезным, но он совсем не интуитивен, особенно если вы пишете на Javascript.

Победитель: надо бросить монетку :)

Работа с правилами media


Почти каждый из нас, начиная работать с правилами @media, добавляет блоки с ними внизу главной страницы стилей. Это работает, но приводит к разъединению стилей, например:

CSS
.some-class {
   /* Default styling */
}

/* Hundreds of lines of CSS */

@­media (max-width: 800px) {
  .some-class {
    /* Responsive styles */
  }
}

С помощью SASS или LESS вы можете объединить эти стили используя вложения.

SCSS
.some-class {
  /* Default styling */
  @­media (max-width: 800px) {
    /* Responsive styles */
  }
}

«respond-to» — довольно таки крутая техника SASS (ознакомьтесь с кодом Chris Eppstein, Ben Schwarz, и Jeff Croft).

SCSS
=respond-to($name)

  @­if $name == small-screen
    @­media only screen and (min-width: 320px)
      @­content

  @­if $name == large-screen
    @­media only screen and (min-width: 800px)
      @­content

Дальше использовать их можно очень лаконично:

SCSS
.column
    width: 25%
    +respond-to(small-screen)
      width: 100%

Примечание: для использования этой техники вам будет нуже SASS 3.2, который пока находится в альфе, установить его можно командой gem install sass --pre. Я думаю что тут не должно быть сомнений в том, что это действительно полезная вещь в разработке.

Победитель: SASS

Метематика


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

LESS
div {
   width: 100px + 2em; // == 102px (weird)
}

SASS даст вам четко и ясно понять что здесь спряталась ошибка:
Incompatible units: 'em' and 'px'. Конечно, это спорный вопрос что лучше — ошибка или неверное значение, но лично я — за первое. Особенно если вы отдаете предпочтение переменными вместо использования цифр, это очень сильно затрудняет их отслеживание.

SASS позволяет проводить математические операции с «неизвестными» единицами измерения, которые могут появиться до следующего обновления. LESS этого не позволяет. Есть еще более странные отличия, например, как SASS умножает числа с единицами измерения, но об этом не сегодня.

Победитель: SASS (с натяжкой)

Развитие


За время написания статьи…

Количество открытых вопросов LESS: 392
Количество открытых вопросов SASS: 84

Запросы пула (в ожидании) LESS: 86
Запросы пула (в ожидании) SASS: 3

Количество коммитов за последний месяц LESS: 11

Количество коммитов за последний месяц SASS: 35

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

Победитель: наверное SASS

Почитать


Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 72

    +35
    Вывод: автору больше нравится SASS, а не LESS.

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

    Вы это видите? SASS переопределяет селекторы, и это более эффективный путь.
    Победитель: SASS

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

    Так что, как всегда в таких сравнениях — это просто набор притянутых за уши фактов, часто не важных, набор ложных посылов и скрытие важных нюансов для того, чтобы оправдать свой выбор инструмента.
      +7
      SCSS ~ SASS. Те же яйца, вид снизу. SCSS обратно-совместим с CSS.
        +7
        SCSS тоже CSS-подобный синтаксис. Необязательно использовать отступы (sass), можно и скобки (scss). Более того, основным является как раз SCSS.
          +6
          Ну почему же.

          — а чем SCSS не CSS-подобный синтаксис? Можно смело переименовывать css в scss, максимум выкинет ошибку синтаксиса аля «не поставлена ;»
          — Используя SCSS я полюбил логику в CSS. Если её убрать, мне будет неудобно, т.к. привык к хорошему

          По поводу строки кода — есть FireSass, который показывает строку кода и файл, но с ним много геморроя. Он у меня приводит к страшным тормозам в FireBug, и вообще флаг дебаг-строк добавляет к каждому правилу по 1 строке, и в итоге в старых IE css грузится на половину, если она большая.

          С другой стороны, я не совсем понимаю, как организовать использование 50+ less файлов так, чтобы соблюдались номера строк? Это реально? Если нет, то встаёт проблема — или писать всё в одном файле (надеюсь никогда к этому не вернусь), или отдельно организовывать сборку CSS на живом сервере.
            +2
            Под SASS уже давно подразумевается SCSS, который совместим с CSS. Это в статье черным по белому. Автор провел прекрасное исследование, SASS действительно уже давно уделывает LESS. Compass не может быть переписан под LESS не потому, что его автору лень, а потому, что это сделать нельзя.

            А генерация спрайтов в компассе — это вообще киллер-фича, избавляет от большой геморной рутины.
            –4
            Кажется внекоторых местах над кодом
            нужно поставить SASS вместо SCSS?
              0
              scss — развитие sass, совместимое с css. так-то.
              +2
              Для компиляции созданных вами файлов стоит использовать такое приложение как CodeKit. Вы должны знать основы Ruby или командной строки или еще чего-то другого...
              1. LESS можно вообще не компилировать отдельно.
              2. Для LESS есть GUI-компиляторы.

              Возможно такое же есть и для SASS (я не в курсе), но этот абзац мне показался странным (если не лишним).
                +4
                Вы когда-нибудь пробовали этот «не компилировать отдельно» использовать на продакшене в крупном проекте? Для презентаций оно выглядит красиво, но на практике — бесполезная игрушка.
                  0
                  (я про компилировании стилей не на сервере, а в браузере)
                    0
                    Пишу не холивара ради, а о том, что первый абзац сравнения ни о чем.
                    0
                    Я не предлагаю этим пользоваться, только сказал, что такая возможность есть. Да и web состоит отнюдь не из одних крупных проектов с километровыми стилями.

                    А для компиляции LESS есть GUI, вся настройка которых сводится к указанию где брать LESS-файлы и куда класть CSS-файлы.
                      +2
                      К слову о GUI. Для SASS есть Scout
                        0
                        Эх, жаль нет linux версии :(
                          0
                          Да, в этом плане у LESS есть грандиозное преимущество в лице SimpLESS. С другой стороны, в консоли и так много времени проводишь, к чему нам лишние окна :)
                            0
                            Ну у меня простой скрипт всё запускает ( $ css project_name ), но удобнее было бы, если бы был единый GUI менеджер со списком проектов, который бы умел прятаться в трей. А в консоли я провожу не так уж и много времени, больше сижу в редакторе и в браузерах :)
                      0
                      Вы когда-нибудь пробовали этот «не компилировать отдельно» использовать на продакшене в крупном проекте?

                      Я сейчас так делаю. Единственное препятствие использовать такой код на продакшне — cross-origin policy, согласно которой less-файл не может лежать на отдельном домене. Но во время девелопмента у меня он компилируется рантайм, так что фича однозначно полезная
                        +1
                        Я тут, не так давно, приводил пример, когда обычный CSS код (правда очень много его, 100+ Кб) в less файле компилировался браузером Opera — 23 секунды, а в IE7 — 10 секунд. Просто пример. Понимаю, что ситуации бывают разные, однако не стоит переоценивать js-движки старых браузеров и оперы (хотя он вроде бы быстрый, странно).
                          0
                          100+ Кб — сильно, что там такого можно было наворочить? это без URI вставок?
                            0
                            Просто «легаси» скопилось много мусора, + довольно непростой сайт. Но css вполне реальная. Вот она. Разжирела уже до 200 Кб :)
                        0
                        А это разве не selling-point LESS'а? То что можно eval'ить CSS-свойства как в старых IE через expressions? :)

                        Тогда вообще не вижу причин использовать LESS.
                          0
                          Я вот честно скажу не пробовал — но подмывало много раз, ибо у меня .less + лоадер .js в разы меньше получается чем компилированный css(даже с жатием).

                          Увеличение нагрузки в браузере!? — сомнительно

                          Отдача 2 статических файлов less + js — мне кажется нименьшим злом по сравнению с «лишним» трафиком и нагрузкой на сервер при компиляции…

                          Есть у кого опыт нагруженных проектов БЕЗ предварительной компиляции less или sass с обработкой в браузере — чем плохо/хорошо — поделитесь?
                            +1
                            Не обязательно компилировать каждый раз less-файл по запросу пользователя открыть страницу. Можно сделать это всего один раз и залить на сервер уже скомпилированный css
                              0
                              Согласен, но я писал что у меня less+js в 2-3 раза меньше компиленного css, а явных препядствий для первого варианта я не вижу — может я чего-то не туда смотрю…
                                0
                                Зато вы два раза дергаете сервер:
                                1) less.js
                                2) style.less
                                В случае прекомпиляции и отдачи готового css из минусов вы получаете только пару килобайт лишнего траффика. Из плюсов — моментальное и корректное отображение стилей, меньшая нагрузка на сервер за счет уменьшения количества запросов к нему.
                                Ну, если вам так удобно, и время компиляции на клиенте очень маленькое — такой вариант тоже хорош
                          0
                          Сейчас бы в 2017 в профессиональной среде разработчиков без гуя не уметь обойтись…
                          +5
                          LESS выглядит всё-таки нагляднее.
                          Автор присудил побуду SASS за счёт Compass, но не стоит забывать, что нужно исходить из задач.
                          Я бы с удовольствием почитал бы статью, описывающую практическое применение Compass, плюсы и минусы, когда стоит использовать.
                            +3
                            Берёшь и используешь. Ну или и не используешь.

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

                            Минусы? Ну надо поставить гем. Возможно что-то настроить, в последний раз вроде изкаропки всё заводилось.
                              0
                              Минусы? Ну надо поставить гем. Возможно что-то настроить, в последний раз вроде изкаропки всё заводилось.

                              Я купил тулзу за $10, которая следит за моими папками, и сама генерит все на лету. Не надо ничего ставить, все работает из коробки. Никаких гемов, Ruby и т.п.
                                0
                                Сам Compass тоже умеет всё из коробки. И не нужно .app. А можно и бесплатно.
                                  +1
                                  less -watch или куча бесплатных утилит типа winless.
                              0
                              Compass умеет делать спрайты из моей папки иконок — это просто неимоверно удобно. Добавить новую иконку? Изменить имеющуюся? Один клик!
                              +8
                              На минувшем Railsconf 2012 был отдельный доклад про sass, где анонсировали 3 фичи над которыми сейчас ведётся работа, и которые появятся в следующем релизе:
                              1. libsass — написанный на C компилятор sass в css, работающий быстрее на порядки нынешнего скрипта на руби. Для крупных проектов это очень существенно — большие объёмы стилей при деплое компилируются ну очень долго(полминуты и дольше). Так же это позволит написать биндинги для libsass к другим языкам, что означает более простое встраивание sass во фрейморки питона/ноды/дотнета/пхп.
                              2. Mixin Content — аналог yield в sass, позволяющий передавать блоки кода в миксины.
                              3. Placeholder Selectors — наследование свойств от произвольных селекторов (сейчас отнаследовать можно только от конкретного css класса).

                              А ещё докладчик постебался, что в less много багов, и что их не фиксят :)
                                +1
                                1. Хочу, хочу, хочу. Скорость текущего парсера, оставляет желать лучшего, на моей, не самой производительной, машине.
                                2. Можно чуть подробнее?
                                +1
                                что означает более простое встраивание sass во фрейморки питона/ноды/дотнета/пхп
                                да и в браузеры, чего уж там :)
                                  +2
                                  Python-биндинги для libsass. Эксклюзивно для Хабра habrahabr.ru/post/144419/
                              • UFO just landed and posted this here
                                  +3
                                  SASS не поддерживает на данный момент такую вот штуку

                                  .some-parent-class {
                                      &__some-modificator {
                                          color: red;
                                      }
                                  }
                                  


                                  в LESS это все компилируется в

                                  .some-parent-class__some-modificator {
                                      color: red;
                                  }
                                  


                                  Полезно для БЭМа.
                                  Хотя в версии 3.2 вроде как обещают запилить.
                                    0
                                    Для ховеров и прочего работает.
                                    0
                                    Как это не поддерживает?
                                    Вполне поддерживает, причём точно также:
                                    &:hover
                                    &:first-child
                                    &.another_class
                                      +1
                                      Если я правильно понял smashercosmo, то он имеет ввиду не доп.класс, а склеить одно название класса по кускам, используя вложенность.
                                        0
                                        Да, вероятно вы правы.
                                        Видимо мне подобное никогда не требовалось, раз в голову не пришло.
                                          0
                                          Я ж сказал, что это полезно, если верстаешь по БЭМу. У них же все имена классов формируются по префиксному принципу.
                                      0
                                      &_
                                      &-

                                      в 3.2 так и не запилили, обещают в 3.3
                                      +2
                                      По мне дак удобнее запустить фоновый преобразователь less в css, писать в less и не парится
                                        +3
                                        Если быть кратким: Stylus.

                                        Выигрывает по всем параметрам, а кроме того, написан на Node.JS, что избавляет от pain in ass с установкой последней беты Ruby через rvm.
                                        0
                                        > Обработка переменных
                                        >…
                                        > SASS имеет странное свойство — если вы переопределите «глобальную» переменную «локальной», глобальная переменная примет ее значение. Немного странно.

                                        Пипец как странно — лезть в глобальный контекст при переопределении локального. Яваскриптеры меня поймут. Тут как раз SASS проиграл.
                                          0
                                          Я полагаю дело в том, что переменная не переопределяется в другой «области видимости», а в том, что ей просто задаётся другое значение. По мне так, вполне логично. Ведь синтаксис то 1 и тот же.
                                          +1
                                          Насколько я понимаю, CSS-фреймворки используются для того чтобы:

                                          1. Использовать вложенные инструкции
                                          2. Минифицировать результирующий код (пробелы, табуляция, rgb -> hex -> short hex triplet)
                                          3. Генерация CSS правил серверным кодом
                                          4. Дополнить кроссбраузерными CSS3 правилами (как-правило опционально и не везде есть)

                                          Наличие остальных фич уже сомнительно…

                                          Для первых 3-х пунктов у меня есть экстремально небольшая либа (пара десятков строк), которая делает следующее:

                                          object =
                                            html:
                                              background: 'red'
                                              body:
                                                color: 'rgb(255, 255, 255)'
                                                'div > p':
                                                  color: 'green'
                                                  border: '#000008'
                                            input :
                                              border : '1px solid #110011'
                                          


                                          Будет транслировано в валидный CSS-код:

                                          html {
                                              background: red;
                                          }
                                          
                                          html body {
                                              color: #FFF;
                                          }
                                          
                                          html body div > p {
                                              color: green;
                                              border: #000008;
                                          }
                                          
                                          input {
                                              border: #101;
                                          }
                                          


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

                                          file = fs.createWriteStream 'file.css',
                                              flags: 'a'
                                              encoding: 'utf-8'
                                              mode: 0666
                                          
                                          file.on 'error', (error) ->
                                              console.error error
                                          
                                          file.write to.toCSS object
                                          
                                          file.end ->
                                              console.log to.toCSS object
                                          


                                          При этом имеется 3 реализации (CoffeeScript, JavaScript, Python), а это значит что достаточно наличия Node+CoffeeScript или Python.

                                          PS: в JavaScript и Python версии фигурные скобки обязательны, в CoffeeScript опциональны
                                            +1
                                            Сомнительные потому, что ваша библиотека, не умеет их?
                                            Постоянно использую:
                                            1. Миксины — блоки стилей, вставляющиеся внутрь любого селектора. Через них же реализованы кроссбраузерные css3 правила. Миксины для DRY — на порядок сокращают повторения в коде.
                                            2. Переменные. Обычно для задания цветов и отступов. DRY.
                                            3. Арифметика — как правило сложение/вычитание для переменных с отступами.
                                            4. Загрузка других scss файлов внутрь текущего, аналог import/include из других языков программирования. Без этого как минимум пукты 1 и 2 не будут работать.

                                            А синтаксис вашей либы — вылитый sass, только с синтаксическим мусором: «object =», кавычки после двоеточия, двоеточие после селектора.
                                              0
                                              В том то и фишка, что в отличии от выше представленных фреймворков мне ничего не приходится парсить, работа происходит с обычным объектом (словарем).
                                              Соответственно я могу использовать переменные, и любые управляющие другие конструкции:

                                              html:
                                                 background: ['#111', '#222', '#333', '#444', '#555', '#666', '#777'][today]
                                                 color:
                                                     if 1 > 2
                                                       'red'
                                                     else
                                                       'green'
                                              


                                              А синтаксис вашей либы — вылитый sass

                                              Как я упомянул выше можно использовать фигурные скобки:

                                              html: {
                                                 background:  {
                                                    ['#111', '#222', '#333', '#444', '#555', '#666', '#777'][today]
                                                 },
                                                 color: {
                                                     if 1 > 2
                                                       'red'
                                                     else
                                                       'green'
                                                 }
                                              }
                                              

                                              только с синтаксическим мусором: «object =
                                              Если писать стили в отдельном файле, то название объекта писать необязательно!


                                              Кавычки после двоеточия, двоеточие после селектора.

                                              Меня это тоже немного смущает, но зато такой код может работать даже на клиенте и без тормозов, т.к. ничего не парсится!

                                              Иными словами, словами все тоже самое только нет фич для CSS3, а добавить эту возможность очень просто (мне пока это не особо нужно).
                                              0
                                              здоровенный css-файл с продакшена я могу переименовать в scss, а потом уже постепенно рефакторить его. css-совместимый синтаксис — сильная сторона scss (как и less)
                                              0
                                              Подскажите, а как заставить NodeJS компилятор LESS-файлов исправлять относительные пути (фоновые картинки, шрифты), так что бы они были правильными относительно расположения скомпилированного файла? JavaScript компилятор правильно переопределяет эти пути, а NodeJS оставляет их без изменения. По моему это достаточно существенный минус у родного компилятора LESS.
                                                0
                                                Ещё один довод в пользу SASS/SCSS — есть возможность выбора синтаксиса.
                                                Именно SASS мне нравится куда больше SCSS, код становится чище и понятнее :)
                                                  0
                                                  ИМХО, инструмент надо выбирать в соответствии с задачей. Не сталкивался еще ни разу с проектом, где вместо LESS потребовался бы SASS с его несколько большими возможностями.
                                                  В связи с этим нет инструмента лучше или хуже. Есть тот, который подходит под задачи, и тот, который по каким-то причинам не подходит (слишком просто или слишком избыточен).
                                                    +1
                                                    Вы не рассмотрели тот момент, что у LESS есть компилятор на стороне браузера — LESS.js

                                                    Это может стать для кого-то решающим аргументом при выборе LESS, хотя сам я такую практику не понимаю.
                                                      +1
                                                      Это перевод :)
                                                      На самом деле компилятор на стороне браузера вещь хорошая, но только для девелопмента.
                                                      Для продакшина такое время компиляции недопустимо.
                                                      • UFO just landed and posted this here
                                                        +2
                                                        Это удобно на стадии разработки и отладки, не более.
                                                        Ну или когда стили LESS не километровые, но сам так не делал.
                                                          +1
                                                          Есть аналог sass.js на гитхабе.
                                                          0
                                                          Вот сейчас собираюсь попробовать SASS, и всё сомневаюсь: с одной стороны — куча возможностей, генерация спрайтов, примеси и прочее, а с другой — мне он кажется каким-то неизящным. Дело привычки, конечно…

                                                          Вот что меня действительно беспокоит, так это как отлаживать и изменять верстку. Может я ошибаюсь, но кажется, что примеси будут сложны в поддержке, потому как сразу не видно, куда эти изменения приминяются. Кто работал, скажите, как вы отлаживаете верстку?

                                                          Еще, ребота с вложениями очень смахивает на прекрасный инструмент, чтобы выстрелить себе в ногу :)
                                                            0
                                                            есть firesass для фаербага. надо только отладочный режим подетальней включить, чтобы в css-файлах писалось из какой строчки scss генерировался данный кусок.
                                                              0
                                                              > Кто работал, скажите, как вы отлаживаете верстку?
                                                              Многие действия провожу в веб инспекторе хрома, когда надо что-то подтюнить, то сначала правлю в инспекторе, сразу же наблюдая результат, а потом копирую измения в файл стилей.
                                                              При таком методе нет никаких отличий между css и scss.

                                                              В девелопмент режиме, без склейки стилей в один файл, содержимое каталога с scss файлами соотностится почти 1 к 1 c содержимым каталога со скомпилированными стилями (если не увлеваться инклудом одних файлов стилей в другие).
                                                              И в веб-инспекторе вы видите, какие наложены стили, по какому селектору, и из какого файла оно пришло. Соответственно правите нужный селектор в нужном файле.

                                                              Если же делать без инспектора, просто вслепую набирая в файле стили и проверяя затем в броузере, то опять же никакой разницы с чистым css — сохранили файл, альт-таб, ф5, видим результат.

                                                              И с миксинами всё сильно упрощается: с обычным css для каждого «признака оформления» приходится либо накладывать определённый класс, комбинируя в одном дом элементе по несколько классов ради разных кусочков стилей в них. Либо, используя меньше css классов, приходится дублировать код в css файлах, разным селекторам прописывая одни и те же стили.
                                                              Миксины и переменные избавляют от этого дублирования.
                                                                0
                                                                Вот я тоже сначала в испекторе подгоняю.

                                                                А как Вы меняете xчто-то в миксинах? Или на миксины разбиваете в самом конце?

                                                                Просто я обычно пишу селекторы через запятую. В таком случае когда в общем стиле что-то меняешь, то сразу видишь, где что поменяется, а миксины придется искать. И вот этот момент мне представляется потенциально неудобным.

                                                                Соответственно меня интересует, как другие справляются с такими задачами. Может я прсто придумываю себе проблему?..
                                                                  0
                                                                  Если смотреть с самого начала, то, пожалуй, сначала пишу просто scss код без миксинов.
                                                                  Когда же вижу, что какие-то вещи надо повторять на разных страницах, так, что невозможно в текущем файле стилей просто обойтись перечислением селекторов через запятую, то выношу код в миксин в один глобальный scss файл, который в обязательном порядке инклюдится во всех остальные файлы со стилями.
                                                                  Вот подобное:
                                                                  @ mixin image-selectable-decor {
                                                                    @ include transition(background-color, 0.2s); <- миксин для кроссброузерного css3 из compass фреймворка
                                                                  
                                                                    background-color: $default-image-background;
                                                                    &:hover {
                                                                      background-color: $default-image-hover-background;
                                                                    }
                                                                    &:active {
                                                                      background-color: $default-image-active-background;
                                                                    }
                                                                  }
                                                                  


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

                                                                  Искать ничего не придётся, потому что в коде у вас будет что-то такое:
                                                                  .news, .articles {
                                                                    @ include default-info-block;
                                                                    /* какое-то свойство из default-info-block тут может быть переопределено */
                                                                    font-size: 13px;
                                                                  }
                                                                  /* а какое-то свойство лишь для одного класса изменено */
                                                                  .news {
                                                                    color: red;
                                                                  }
                                                                  

                                                                  Вы сразу видите, что там из миксина всё берётся, а мест, где может быть определён нужный миксин, у вас будет всего 1-2.
                                                              –1
                                                              Объясните пожалуйста на элементарном примере, зачем нужен метаязык? Просто мне стало любопытно, начал вникать, но так особо преимуществ не нашел. Ну где то можно объявить переменную, и поменять цвет, к примеру, во всех элементах где он используется, поправив только одну строчку. Плюс. А что еще?
                                                                0
                                                                По поводу extend, — в Less тоже есть extend.
                                                                См. доки: lesscss.org/features/#extend-feature
                                                                Пост мягко-говоря староват, и несколько не актуален, так что на момент написания статьи наверняка extend-а ещё не было.

                                                                Only users with full accounts can post comments. Log in, please.