Каким CSS-препроцессором удобней пользоваться?

Question

[hvab]

Хочу начать пользоваться препроцессорами. Начать думаю с того, чтобы посоветоваться с профессионалами.

1. LESS или SASS (SCSS)?
Привлекает меня LESS. Колеблет мое решение новость о том, что создатель бустрапа переписал весь код на SASS. Довериться его дальновидности?

2. Где инструменты удобнее?
У какого препроцессора есть возможность на лету генерировать css-код, а не запускать команду перед каждый обновлением в браузере? Может есть какая-то связка, при работе с которой, в реальном времени идет обновление страницы. То есть, пишешь стили, например, на LESS, а у тебя на втором мониторе в окне браузера мгновенно видны все изменения. Есть ли плагин для Developer Tools, который показывает стили не на CSS, а сразу на LESS?

3. Знаете ли вы очень хорошие ссылки, по которым можно найти описание полного процесса работы с использованием препроцессора? Чтобы рассказывалось, как удобней организовать структуру папок, сборку, деплой и пр.

Answer 1

[Сергей Протько]

LESS или SASS

SASS имеет некоторые приятные плюшки, вроде циклов и условий, удобно работать с цветовыми палитрами и т.д.

С другой стороны все это нужно далеко не всем и многим людям больше нравится css-like синтаксис (sass использует ruby-like синтаксис). В целом их возможности схожи, но различия идут в нюансах.

Довериться его дальновидности?

Я не думаю что у вас будут те же нужны что и у ребят из твиттера, так что тут как хотите.

У какого препроцессора есть возможность на лету генерировать css-код

Это никак не зависит от препроцессора, они все берут исходник и генерируют css. То что вы ищите - сборщик с отслеживанием изменений. Можете посмотреть в сторону gulp или использовать webpack/jspm. Так же многие IDE из коробки имеют ватчеры. Ну или вы можете в bash запустить inotify, но это путь красноглазых линуксоидов.

полного процесса работы с использованием препроцессора

DRY, BEM, oocss и т.д. Все остальное выходит за рамки простого использования препроцессора, но основная идея - автоматизируй рутину.

Comments

[Сергей Протько]

Александр А: вы может путаете с тем, на чем препроцессор реализован?
p.s. перечитал ваш комментарий 5 раз... и немного запутался)

[Сергей Протько]

Александр А: то о чем вы толкуете это лишь разные реализации одного и того же, тут соль больше в том что SCSS был придуман рубистами еще до less и, как и в случае с кофескриптом, черпали вдохновение они в ruby. Я только об этом.

[sim3x]

Сергей Протько: sass/stylus для тех кому не хочется ставить скобочки!

[Сергей Протько]

Александр А: универсальность - это postcss, а sass это просто препроцессор. Мне больше нравится less так как он дает доступ к AST и возможность расширять это дело на js. С sass или libsass такое не выйдет.

[Сергей Протько]

Александр А: а вообще мне нравится дух конкуренции, так что... пусть все живут)

[hvab]

Спасибо за gulp. Прочитав пару статей (grunt vs gulp), и небольшую книгу "Getting Started with Gulp" от Travis Maynard, в голове сложился дальнейший путь. Спасибо за ответы! Для начала выбрал LESS, а в будущем уже буду исходить из требований проекта.

[Дима]

sass - синтаксис отступов, scss - как вы пишите css-like. Это к первой чуши которую вы написали, вторая ваша чушь - "..возможность расширять это дело на js. С sass или libsass такое не выйдет". ну почитайте интернеты и не пишите чего не знаете

[Сергей Протько]

Дима: я их путаю. По второму - ну привидите пример, что там пишут в этих ваших интернетах. Там даже доступ к AST файла получить нельзя, так что ничего расширять вам не получится, только старый добрый C++ и вперед. Если я не прав, привидите пруфы, мне было бы любопытно.

[Дима]

Сергей Протько: https://www.npmjs.com/package/sass-thematic

[Сергей Протько]

Дима: так, давайте разбираться.... это не расширение libsass, это грубо говоря пост-процессор, использующий gonzales в качестве парсера. Это по сути то же самое что использовать связку из libsass + postcss (в частности autoprefixer). То есть да, это нормальный подход, но поддерживать и расширять libsass сообществом сильно сложнее.

[Дима]

Сергей Протько: Серега, но это не "невозможно", согласись

[Сергей Протько]

Дима: оукей, попробуй скормить libsass CSS содержащий синтаксические конструкции, которые он не понимает, но которые нужны какой-то другой тулзе (например для инлайнинга картинок у postcss есть клевый плагин, который не так то легко юзать с libsass). И тут уже никакой пост-процессор не спасет, решить эту проблему можно еще одним препроцессором, но это кастыль.

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

[Сергей Протько]

Дима: поясню все же, когда я говорил про то что libsass написан на плюсах и малокто может его допиливать/докручивать, я больше говорил о неповоротливости синтаксиса. Со штуками типа postcss ты сам себе хозяин, тебе решать какой синтаксис, как и когда ты хочешь юзать. Это единственный на данный момент универсальный инструмент, который спокойно может заменить sass своими плагинами для подавляющего большинства пользователей.

[Дима]

Сергей Протько: так согласен, не поспоришь

Answer 2

[Игорь]

Начинал с LESS из-за более быстрого "старта".
Можно просто подключить less.js в html файле и сразу видеть результаты, без необходимости компилирования через консоль.

Но в последствии, после начала использования NPM => BOWER, GULP планирую переходить на SCSS

Answer 3

[Mikhail Osher]

SCSS

Answer 4

[sim3x]

За 4 часа можно попробовать написать на обоих и самому выбрать

Answer 5

[Mr Crabbz]

Мне лично больше понравился SASS.
Из компиляторов - попробуйте https://prepros.io/ . Там всё необходимое для компиляции плюс livereload и так далее. Причем интерфейс полностью графический, тот же SASS компилится автоматически при сохранении - консоль не нужна.

Answer 6

[Дима]

документация по sass - sass-scss.ru

Answer 7

[Фёдор Ананин]

Пересел на SCSS. Компилирую в Prepros. Всё делается на автомате :) В редакторе сохранил файл, препрос его сразу же автоматом подцепил и скомпилил. FX8320+8Gb Ram+SSD = моментальный результат. Core i3 (точную модель не помню, стоит в планшете)+4Gb Ram+SSD = есть мелкие тормоза.