Какой CSS препроцессор выбрать?

Question

[Вадим Белкин]

Несколько лет назад узнал о препроцессорах, и в целях изучения был выбран LESS. Выбор пал на него в первую очередь из-за возможности использования сразу в верстке, без сборки компиляторами. С недавних пор начал использовать Gulp и JADE. К синтаксису JADE быстро привык, да и быстрее с JADE кодом работать чем с чистым HTML. Сейчас задумываюсь о переходе на другой CSS препроцессор, а поскольку их знаю всего 2 (LESS и SASS), то соответственно начал присматриваться к SASS. В плане синтаксиса, построения показался похожим на JADE, нет закрывающих и открывающих скобок, вложенность за счёт табуляции делается на сколько я понял. Показался проще в написание. Ещё наткнулся на Stylus, но пока ещё не ознакомился с ним.

Можете посоветовать, какой препроцессор выбрать? В интернете много статей по сравнению, но мне они показались все однотипные и похожие. Интересны мнения тех кто работал с несколькими препроцессорами.

Comments

[Иван Сергеевич]

Попробуй каждый из них на реальных проектах. И попробуй PostCSS, хоть это и не препроцессор

Answer 1

[Денис Инешин]

Все топовые препроцессоры дают примерно равный набор возможностей и очень очень мощны. Всегда найдутся люди, которые будут говорить, что им нравится X-препроцессор, ибо там есть киллер-фича без которой они не могут жить, но это всё вкусовщина. Так что просто выбирайте тот препроцессор, синтаксис которого вам будет по душе. Вот и весь принцип.

Answer 2

[Матвей Мамонов]

Попользовался SASS'ом (а именно SCSS'ом).
Во-первых, ужасно намучался с использованием оного.
Под виндой работать не хотел наотрез.
Только с костылями и Compass'ом принялся работать под Ubuntu.

Во-вторых, это то же самое, что и учить новый язык.
Честно, единственный (!) плюс, который я нашел в использовании этих препроцессоров - это то, что можно использовать переменные. И всё.
Все остальное вам вряд ли понадобится, если вы уже пишете ровный код.

Лучше вместо того, чтобы учить тот же SASS, выучите CSS. Серьезно, куда больше толку будет.

В нем (обычном CSS) на самом деле куда больше возможностей, чем Вам кажется.
А препроцессор Вам сильно жизнь не упростит.

Знаю, все равно попробуете хоть один препроцессор, даже несмотря на мой ответ.

Comments

[Volodimir Babeshko]

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

[Матвей Мамонов]

Konstantin Abaiev:
"а вообще препроцессоры как минимум дают более читабельный код"

Готов поспорить. Лично я бы не сказал, что это

a {
...
  b {
  ...
  }
}

Выглядит читабельнее этого:

a {
...
}

a > b {
...
}

Не согласен с тем, что легко гуглятся. Моя проблема гуглиться не хотела. Просто уже давно были мысли переходить на *nix, а тут еще и повод появился.

Единственный плюс, который мне принес тот же SCSS за 10 минут пользования это то, что благодаря нему я перешел на linux :D

[Андрей К]

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

Answer 3

[Александр Гончаров]

Я давеча отвечал на подобный вопрос здесь, но повторюсь и дополню ответ.

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

Матвей Мамонов писал в пользу обычного CSS, но очевидно забыл про методологии (BEM, SMACSS), которые кроме понятной организации файлового дерева привносят принципы ООП, например инкапсуляцию, в мир CSS. Без препроцессоров невозможно сделать на самом деле DRY (Don't Repeat Yourself) проект, который будет удобно масштабировать и использовать другим людям.

Владимир Чернышев писал в пользу постпроцессоров, но они на самом деле заставляют забыть большое количество информации, которая позволяет более полно понимать и оптимизировать код. Постпроцессор — это всегда черный ящик, который невозможно контролировать и который дает только конечный результат (вопрос какой).

С Sass очень удобно работать и, должен признать он наиболее гиковский из всех препроцессоров, потому что все алгоритмические структуры (следование, ветвление, цикл) на нем писать удобнее, можно делать очень разухабистые инструменты.

Comments

[Матвей Мамонов]

Разумеется, что во всем есть свои плюсы.
Просто не всегда стоит ради нескольких незначительных плюсов переезжать на что-то новое.

Тем более, что пока что я не пишу в большой команде.

[Андрей К]

Может это изменилось в последнее время и дар года назад Ваше утверждение было правильным, но при наличии современного Stylus выглядит странно.

Answer 4

[Владислав Безенсон]

Мне приходилось работать с LESS, SCSS, Compass (тот же SCSS, только с дополнительными фичами). Больше всего мне нравится LESS. Во первых - это скорость компиляции. LESS может компилироваться быстрее SCSS раз в 6. У него синтаксис не такой строгий, как у SCSS (по-крайней мере мне так показалось)). В Compass есть разного рода фичи, как генерация спрайтов, например. Однако с помощью всяких gulp/grunt плагинов можно и для less такое сделать.

Answer 5

[zooks]

SASS в синтаксисе SCSS. Желательно на node.js (libsass).

Answer 6

[sivabur]

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

Answer 7

[SnowElephant]

Stylus. Зачем писать ";" после каждой строчки? Ну и фигурные скобки тоже не нужны.

Answer 8

[Максим Гречушников]

scss
а вообще вопрос по типу какой ручкой лучше написать письмо. синей или черной.
какой удобней той и пишите

Comments

[Вадим Белкин]

Тут как раз интересны мнения тех кто работал с несколькими. Какие проблемы были с использованием. Я работал только с Less и возможные проблемы на других препроцессорах мне неизвестны пока.

[raiboon]

Большая боль, что приходится тащить в проект руби. Пусть, есть libsass, но он иногда опаздывает по фичас от руби-версии. Плюс в нем нет линтера, всё равно тащить руби.

Answer 9

[Сергей]

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

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

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

Comments

[Максим Дунаевский]

GULP или Grunt решают проблему, для обоих есть плагин-watcher, который следит, не изменились ли файлы.

[Роман]

>> он компилируется у каждого клиента при каждом запросе
это если использовать его в скриптовом варианте. А так ставится Panda или подобное и тогда чудненько работает автокомпиляция. При этом файл автоматически перекомпилируется при внесении изменений.

Answer 10

[Владимир Чернышев]

Вроде в последнее время в тренд входят постпроцессоры.

Comments

[Par Mactep]

Одно другому не мешает, а скорее дополняет

Answer 11

[Николай Громов]

начните с LESS, потом изучите SCSS и Stylus
выбрать только один — странно.

Comments

[Матвей Мамонов]

Что, простите?
А как вы собираетесь с несколькими работать?
И зачем?

[Николай Громов]

Матвей Мамонов: речь не о том, чтобы ОДНОВРЕМЕННО на одном проекте с несколькими работать.

[Матвей Мамонов]

Николай Громов: А тогда смысл несколько изучать?
Чем, например, не подходит SCSS для конкретного примера, где подходит, скажем, LESS?

[Николай Громов]

Матвей Мамонов: это я вопросн е до конца прочитал :D:D:D извиняюсь.

Answer 12

[Воскан Восканян]

CSS-препроцессоры