Стоит ли использовать препроцессор отличный от SCSS?

Решил чуть глубже копнуть историю препроцессоров. И будет пару вопросов людям, которые могли бы подсказать.
В двух словах, история получается такой что на сегодня есть только
Sass/SCSS, Less, Stylus
  • Sass Вначале рубиновцы придумали упростить себе жизнь со стилями, и приблизить до руби-подобной простоты, убрав из цсс скобки, точку с запятой, и добавив плюшек типа миксины, переменные и математику. Так появился Sass.
  • LESS Но не всем понравился такой радикализм, потому придумали сделать такой же велосипед с миксинами и переменными, только синтаксис оставить как у цсс, со скобками и точкозапятыми. Так родился LESS.
  • SCSS В Sass подумали, и решили что действительно погорячились, так что сделали что упрощенный формат будет альтернативным, внеся в Sass второй вариант синтаксиса, тоже такой же как в нативном цсс. Так родился SCSS. Который все равно называют Sass. Просто первую версию считают "сасс с отступами", и поддерживают оба варианта диалектов.
  • Stylus Но не всем стало по душе что революция "долой скобки и точкисзапятой" была подавлена, потому решили пойти дальше, придумав что можно хоть так хоть этак, то есть в одном файле использовать и чистый цсс стиль синтаксиса, и облегченный. Да и вообще, можно даже двоеточие упразднить - компуктер и так поймет что есть что, и сам поразгребает все эти заклинания. Так родился Stylys.
  • альтернативы У меня в заначках числятся мелкие проекты, типа Myth, Resin, styl, sly, Rework, CSSOnDiet, csscrush, Stylecow, suitcss,
    и постпроцессоры, типа PostCSS и pleeease

Есть конечно еще "небольшое" отличие - если Сасс работает на руби(ок, есть реализации для других серверных языков, и библиотека на си), и когда ты пишешь стили, их надо компилировать, то есть в продакшн ты все равно отдаешь собранный ЦСС, то ЛЕСС уже работает на JS, потому его можно просто отдавать браузеру, подключив .js файлик(хотя тоже можно собирать).

Вот и мои вопросы:
0 вот тут есть известный ежегодный опрос фронтендеров, где среди прочего нас интересует:
Sass 65.39%,
No Preprocessor 14.58%
PostCSS 8.66%
Less 6.52%
Stylus 2.18%
Other 2.67%
spoiler
q3.jpg


1 Итого, реально есть 3 препроцессора. Везде в интернетах, где обсуждают препроцессоры, говорят только о трех. В последнее время добавляется еще обработчик postCSS (тут пока оставим в стороне дискуссию что такое пре- и пост- процессоры, и что по сути в данном случае это одно и то же, и даже скорей этопросто "процессоры", без пре- и пост-).
Знаете ли вы еще какие-то варианты цсс препроцессоров кроме перечисленных, на которые стоило бы обратить внимание и потратить время? Используете ли что-то кроме...sass?

2 Почему, раз всё началось с DRY, все равно вернулись к обычному цсс "избыточному" синтаксису? Ведь ни sass ни stylus, при прочих равных плюшках, но с простым чистым синтаксисом, не стали столь же популярными, как scss и less, которым нужны скобки, кавычки и точки с запятой.

3 почему сасс выиграл гонку у лесс(даже бутстрап пересел на сасс в 4й версии), тогда как препроцессинг немного более муторный, чем просто возможность подключить жаваскрипт, и отдавать как есть на клиента?

4 Почему такой крутой стайлус, где больше плюшек от "настоящего языка программирования", и даже свои фреймворки есть, вообще где-то на задворках по проценту его использования? Даже Koala не может его компилировать. И в VS Studio live reload с ним не работает(впрочем, с Sass тоже, хотя с scss работает)

5 Есть ли вообще смысл использовать Stylus? Или забить, и пользовать сцсс, как все?

6 интересная статья 2018года, задающаяся вопросом нужны ли сейчас препроцессоры, или можно обойтись нативными средствами цсс, которые пытаются реализовать преимущества препроцессоров(математические выражения, переменные, вложенность, миксины). Приходит ко мнению что препроцессоры скорее еще нужны. А в комментах даю ссылки на статьи, где знатные верстуны рассказывают почему не пользуют препроцессоры.

7 Но есть мнение, что достаточно просто писать ванильный цсс, и отдавать постпроцессору. Я не улавливаю чем постпроцессор может заменить препроцессор. Вот почему некто может отказаться от sass и перейти только на postcss?
  • Вопрос задан
  • 1824 просмотра
Пригласить эксперта
Ответы на вопрос 7
delphinpro
@delphinpro
frontend developer
О, мой любимый холиварчик! =))

Начнем с indent vs brackets. Код с отступами лаконичен, по-своему красив, но обладает фатальным недостатком — его нельзя просто так взять и скопипастить из одного места в другое. Отступы обязательно нарушатся, IDE не поймёт и всё развалится. Нужно вручную поправлять, чтобы все встало на свои места. Также в процессе рефакторинга нарушаются отступы и появляется геморр. Второй серьёзный недостаток — это несовместимость с native css. Нельзя взять кусок css кода из интернетов и вставить в свой файл, его нужно вручную (или онлайн конвертером) переформатировать под нужный синтаксис. Всё это лишние телодвижения, лишние сложности, трата времени. Поэтому только скобки. Благо скобочный синтаксис поддерживается во всех трех препроцессорах.

В пункте 3 вы ерунду написали. Никто в серьезном проекте не будет подключать браузерный компилятор стилей. Даже при использовании less стили все равно обрабатываются заранее и на продакшн выкладывается готовый css файл.
Так что это преимущество less не стоит брать во внимание от слова "вообще".

[Написанное в следующем абзаце, исключительно моё мнение, а не общепризнанные факты]
Почему же sass выигрывает? Во-первых, это достаточно мощный препроцессор, с огромным количеством возможностей. Во-вторых, и я думаю, это главное, он единственный, компилятор которого написан на "С" -> скорость работы. Другие два написаны на javascript. И в-третьих, исторически так сложилось. Стайлус крутой препроцессор, но он появился много позже остальных и возможно, еще не успел набрать популярность.

В свою очередь у scss есть свои серьёзные недостатки.
Первый — невозможно в scss/sass файл импортировать обычный css, он не будет включен файл, а будет заменен css-импортом. В других препроцессорах имеются специальные синтаксические конструкции для этого.
Второй — отсутствие резолвинга путей, что другими так же предоставляется "из коробки". Приходится извращаться с прописыванием путей к картинкам. Проблема нивелируется при использовании вэбпака, но ведь не всегда он используется.

Что касается меня, то я готов мирится с этими двумя недостатками sass. Остальные возможности их с лихвой перекрывают.
На чем вам остановиться,я советовать не буду. Я свободно работаю со всеми тремя инструментами, но новые проекты всегда начинаю с использованием scss.
Ответ написан
Faustlogger
@Faustlogger
Front-end developer
В разное время пользовался SASS - > SCSS - > Less - > PostCSS - >SCSS. Мой личный опыт подсказывает что лучше PostCSS на данный момент ничего нет.

В чем его преимущество - ты пишешь CSS с JS примесями, которые приносят нужный тебе функционал. Ты можешь сконфигурировать процессор (я не оговорился, постпроцессором он уже не является) под себя. Работает в разы быстрее, поддерживает css-модули. Если чего-то не хватает, берёшь и сам дописываешь. Оч сильный механизм плагинов и функций.

Недостатков вижу два - игнор инструмента разработчиками CLI (привет команде ангуляр-кли ума которых хватило только на использование автопрефиксера) и игнор со стороны JetBrains, которые не смогли разводиться на адекватную поддержку данной тулзы. Теперь я благополучно пересел с IDEA на vsc.

Вывод : SCSS - хорош и достаточен, SASS - ruby on rails only, Less - пожалуй уже не актуален, PostCSS - все же немного лучше SCSS и предлагает иной и более удобный механизм работы с CSS (рекомендую его попробовать после изучения scss).

P. S. Сугубо моё мнение исходя из опыта, не навязываю. Холиварить глупо
Ответ написан
gobananas
@gobananas
botbot.ru
Думаю не стоит. Посмотреть можно. Серьёзно применять в работе вы всё равно будете только один из них, а значит зачем тратить много времени.
Ответ написан
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
1. scss, less
2. ниже порог входа = больше популярность = больше востребованность
3. тема отдельной статьи и их уже миллион
4. порог входа
5. дело вкуса. Если он Вам удобнее - используйте его
6. Есть проекты где нет смысла, есть где есть смысл. Есть староверы, которые принципиально пишут на css. Есть амиши, может от них взять больше, тогда вообще вопрос отпадет. Вы пытаетесь найти идеальное решение - его нет. Было бы - не было бы других.
7. Нельзя решать такие вещи оторвано от проекта. В конкретном проекте может быть оправданным тот или иной метод. В абстрактом они равнозначны. Дело вкуса.
Ответ написан
dom1n1k
@dom1n1k
Использую Less и Scss.
Scss мощнее, но некоторые аспекты языка реализованы на удивление коряво.
Less более ограничен по возможностям, но имхо на типовом коде удобнее и для небольших проектов его почти всегда достаточно.

Почему, раз всё началось с DRY, все равно вернулись к обычному цсс "избыточному" синтаксису?
Про синтаксис на отступах я всегда говорил и говорю - он смотрится круто и чистенько на маленьких стерильных примерах, но в реальном большом проекте читается хуже, чем код с нормальными скобками.

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

Есть ли вообще смысл использовать Stylus?
При соблюдении нескольких условий: продуктовая разработка, сильная команда, увидели для себя конкретную пользу в каких-то фичах - можно. Иначе (заказная разработка, джуны, выбор не-мейнстримного инструмента без конкретных причин, а просто оригинальности ради или потому что кто-то где-то написал, что он крут) - однозначно нет.
Ответ написан
Sanes
@Sanes
Думаю LESS вам будет достаточно, если задаётесь таким вопросом. Тот же Uikit3 написан на LESS и SASS. Фреймворк там покруче бутстрапа будет.
Ответ написан
sim3x
@sim3x
1 Итого, реально есть 3 препроцессора. Везде в интернетах, где обсуждают препроцессоры, говорят только о трех. В последнее время добавляется еще обработчик postCSS
Знаете ли вы еще какие-то варианты цсс препроцессоров кроме перечисленных, на которые стоило бы обратить внимание и потратить время? Используете ли что-то кроме...sass?
Пока у других препроцессоров нет с/с++ либы, альтернативы сасс/сцсс нет.

2 Почему, раз всё началось с DRY, все равно вернулись к обычному цсс "избыточному" синтаксису? Ведь ни sass ни stylus, при прочих равных плюшках, но с простым чистым синтаксисом, не стали столь же популярными, как scss и less, которым нужны скобки, кавычки и точки с запятой.
вкусовщина

3 почему сасс выиграл гонку у лесс(даже бутстрап пересел на сасс в 4й версии), тогда как препроцессинг немного более муторный, чем просто возможность подключить жаваскрипт, и отдавать как есть на клиента?
libsass

4 Почему такой крутой стайлус, где больше плюшек от "настоящего языка программирования", и даже свои фреймворки есть, вообще где-то на задворках по проценту его использования? Даже Koala не может его компилировать. И в VS Studio live reload с ним не работает(впрочем, с Sass тоже, хотя с scss работает)
PR + совместимость

5 Есть ли вообще смысл использовать Stylus? Или забить, и пользовать сцсс, как все?
для души - я б посоветовал попробовать css-in-js. Где-то в том направлении находится веб будущего и будущий делфи

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

7 Но есть мнение, что достаточно просто писать ванильный цсс, и отдавать постпроцессору. Я не улавливаю чем постпроцессор может заменить препроцессор. Вот почему некто может отказаться от sass и перейти только на postcss?
постцсс просто название. Оно ничего не означает и не обязует автора
Если у вас есть куча времени на сборку вашего кода, то данный препроцессор - ваш выбор
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 марта 2019, в 03:19
100000 руб./за проект
26 марта 2019, в 01:09
40000 руб./за проект
26 марта 2019, в 00:54
40000 руб./за проект