Какие препроцессоры html&css выбрать?

Question

[Даниил Вершинин]

Мальчик вырос, и теперь ему стало обязательным изучением препроцессоров. Короче, что посоветуете выбрать из этого:
Jade
Sass
Less
Emmet
(Знаю, выполняют разные задачи, если не трудно, напишите различия - а так, в Интернете, думаю, инфы много о них)
И самое главное:
Какие препроцессоры используете Вы?? Почему Вы их используете. Спасибо

Answer 1

[Сергей delphinpro]

sass(scss) - как самый мощный. однако, как и у остальных, имеет свои проблемы. Самая неприятная - отсутствие встроенной опции для резолвинга url (критично при сборке вебпаком, в этом случае лучше взять стайлус).
Jade/Pug не приемлю из-за синтаксиса, основанного на отступах, предпочитаю более html-ные шаблонизаторы (twig, handlebars)
Emmet сейчас по дефолту встроен во все более или менее приличные редакторы и IDE.

upd
Главное забыл =)
Неважно что именно вы выберите. Важно то, что научитесь использовать эти инструменты в работе. А знать в той или иной степени придется всё. Никогда не знаешь, с чем придется работать.

Answer 2

[Олег]

Emmet это не препроцессор, это няшная штука для редакторов, чтобы быстро "разворачивать" простыни кода из маленьких команд.

Для HTML советую Pug (ex Jade), для CSS посмотрите на Stylus. Почему? Минималистичный синтаксис плюс мощная и гибкая начинка корнями из JS.

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

Comments

[Сергей delphinpro]

>> видимо скобочки решают.
он и без скобочек умееет. даже более минималистично, чем остальные. И раньше даже такой синтаксис дефолтным был. Так что не скобочки решают =)

[Олег]

Сергей: Да я знаю, решает скорее идентация, которую не все любят.

Answer 3

[Alexander]

синтаксис Sass очень на python похож )))
Sass, Scss, Less выучить не сложно. Лично мне удобно использовать LESS так как в него встроен autoprefix и + я не использую сторонее ПО что-то типо KOALA и т.д, можно запустить через webpack или как в моем случаи через File watcher у webStorm с аргументами --no-color $FileName$ --clean-css="--s1 --advanced --compatibility=ie8" --autoprefix="last 2 versions". На выходе получаю чистый, сжатый, с префексами css код.

Answer 4

[dhat]

Если будете использовать фреймоворки вроде Бутстрап, то нужно будет знать все препроцесоры. Благо, они не сильно сложные. Для работы предпочитаю SCSS, не Sass.
Jade/Pug - бесполезный костыль, имхо. Зачем оно нужно? Для шаблонизации есть другие способы, а чисто ради "эстетики" кода ХТМЛ - это дело вкуса. Мне лично неприятен и непонятен код Jade.

Есть еще PostCSS. Раз Эммет зачем-то упомянут, то и это нужно иметь ввиду.