Какие компиляторы css2 sass,scss,less Вы знаете?

Question

[PrinsAlbert]

Вступление
Задался целью перевести все проекты на scss.
Сама задача объемная и большая и сразу решить не получается.
Интересует главное, в сети много онлайн генераторов css to *ss, причем справляются они годно, для начальной оптимизации.
Версткой занимаюсь давно, препроцессоры знаю на среднем уровне.
Так вот, по сути css и язык препроцессоров достаточно простой, по сравнению с js и php
Логика может быть сложной, тем не менее если использовать одну из методологий можно с помощью них сделать плагин, т.к. несколько регулярок позволит собрать нам переменные для цветов, шрифтов, изображений и даже mixin.

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

За это время удалось найти следующие проекты:
https://github.com/skandasoft/css-sass-scss
https://github.com/sircus/process-css2scss
https://github.com/jxnblk/css-scss
https://github.com/jpablobr/css2sass
https://github.com/jonschlinkert/grunt-refactor

Какой из них лучше написан я не знаю, надо попробовать все.

Лезть в англоязычный интернет пока не хочется, но тем не менее все результаты я нашел именно оттуда, туториалов найти не удалось.

Еще не много гугления и я буду знать всех разработчиков node.js, ruby по именам и в лицо(
по крайне мере самых лучших.

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

Вопросы:
Какие компиляторы/плагины css2 sass,scss,less Вы знаете?
Какой из них лучший?
Есть ли туториалы или как это настроить?

Желательно раскрытый ответ

Пока 3 основных вопроса

Comments

[Котик Антон]

Так вот, по сути css и язык препроцессоров достаточно простой, по сравнению с js и php

Как только в голову пришло их сравнивать.

[PrinsAlbert]

27cm: надо же было провести хоть какую-то аналогию, вещи то конечно разные и задачи решают разные

Answer 1

[Тимур Шемсединов]

Я лично использую https://www.npmjs.com/package/node-sass он же на гитхабе https://github.com/sass/node-sass
Это лучшее, что я смог найти. Хоть я не большой знаток и не большой любитель стилей или вообще браузерной верстки, но выбирать пакеты из npm приходится. Поэтому пару советов есть, чтобы исключить долгие страдания и сомнения, нужно принять систему формальных критериев и измеримых величин, все лучше, чем выбирать по смутным интуициям:
1. Список претендентов можно сделать по поиску, статьям, Хабру, Стековерфлову и по вот этим ресурсам: nodeframework.com https://github.com/sindresorhus/awesome-nodejs https://github.com/vndmtrx/awesome-nodejs
2. Сначала я сравниваю по количеству звезд в Github и NPM, по количеству скачиваний, по давности последнего коммита и их общему количеству, по контрибьюторам и тому, что делается в пулреквестах и ишьюсах (как быстро устраняются баги, реагируют ли разработчики на проблемы вообще, все это сразу видно). Нужно выявить дохлые проекты и их отбросить.
3. Потом ставлю их себе и сравниваю исходники. Чем меньше размер исходников и приятнее стиль кода, тем лучше. Отбрасываю монстров, у которых огромные репозитории и сомнительный код. Оставляю самые лаконичные или даже минималистичные (люблю минимализм). Ну и, для этого конкретного случая нужно сравнить результаты и качество генерируемого css.
4. После этого проверяю на скорость/производительность. Для чего нужно сделать тесты. В этом случае нужно взять пример файла scss стилей посложнее и прогнать его через каждую библиотеку по 1млн раз и сравнить цифры.

Answer 2

[prodavec macdonalds]

Не вижу особой разницы в них, выбирай любой и изучай. На всё времени не хватит, тем паче, что они одинаковы на 85%.

Comments

[PrinsAlbert]

Почему одинаковы или в чем?

Answer 3

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

Задался целью перевести все проекты на scss.

А зачем?

Возьмите postcss и радуйтесь. Расширяйте синтаксис CSS по своему вкусу. Удобно для рефакторинга так же.

Comments

[PrinsAlbert]

Есть tutorial в котором можно понять как это будет работать и базовый набор плагинов?

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

PrinsAlbert: https://github.com/postcss/postcss

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

PrinsAlbert: если больше нравятся видяшки: https://www.youtube.com/watch?v=73dl5dk9z4Q

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

PrinsAlbert: забыл сказать, я помниться как-то ресерчил вопрос конвертации стилей из CSS в LESS (не люблю я scss), и после эксперементов стало понятно что это не имеет особо смысла. Лучше потихоньку рефакторить стили.

[PrinsAlbert]

Сергей Протько: мастер классов/видео/блогов, все что не на первых страницах гугла, тоже нет? Идея в принципе хорошая, документация слабая, не сказал бы что переехать будет просто, проекты были адаптированы под sass.

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

PrinsAlbert: что значит "адаптированы под sass"?

[PrinsAlbert]

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

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

PrinsAlbert: движек завязанный на препроцессоры? Это как? Я вам вообще-то препроцессоры не предлагал, я предлагал от них отказаться и идти по пути постоянного улучшения.

[PrinsAlbert]

prntscr.com/7cy73w - Нужно думать что менее трудоемко. На практике если в движке используются технологии или стандартные компоненты ядро лучше не модифицировать, чтобы иметь возможность обновляться

[wittyrider]

Возьмите postcss и радуйтесь

а как быть с подсветкой синтаксиса(вложенность, переменные и cssnext) ?

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

wittyrider: пока никак, но глядишь сделают:
https://youtrack.jetbrains.com/issue/WEB-16601

Answer 4

[teotlu]

Я использую сборку с помощью gulp, и у меня там gulp-sass. gulp-less тоже есть.

Answer 5

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

ИМХО, задача не имеет смысла. Я понимаю уже новые проекты делать на основе препроцессора. Но зачем старые то переводить? Любой CSS является вполне себе валидным LESS например. Максимум что может быть реально нужно для старых проектов, это вынести цвета в переменные и всё, и то при условии, что вам приходится часто лазить в эти проекты и что-то доделывать.

Comments

[sim3x]

Любой CSS является вполне себе валидным scss также