Что использовать LESS или SASS?

Question

[Петр Волханов]

привет всем! я сейчас делаю один сайт, куда хочу внедрить процессор CSS... Что лучше выбрать LESS или SASS? И чем они отличаются друг друга? какие они дают преимущество перед использованием обычного css?

Answer 1

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

less, scss и stylus для 98% работ обладают полностью идентичной функциональностью и выбор меж ними или чисто эстетический или технологический (какие-то ограничения проекта).
сам для себя выбрал Less — привычно, наглядно, красиво, удобно работать с emmet

и не верьте статьям 12-х годов о том, что «scss намного мощнее».
на данный момент (конец осени 2014) все перечисленные препроцессоры равны по возможностям на 98%.

п.с.: реально каждый день из всех возможностей препроцессоров используются: переменные, примеси и вложения. ОЧЕНЬ странно под каждый проект заново писать генераторы модульной сетки и т.п. вещи, требующие условий и циклов.

Answer 2

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

Не SASS а SCSS, это вопервых.

Во вторых, SCSS помощнее будет, но по сути и less вам хватит за глаза. В плане готовых снипетов и прочее, они приблизительно равны.

Comments

[Назар Мокринский]

Общее название SCSS и SASS всё же SASS. А так поддерживаю SCSS

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

можно с SasS перепутать.

[Александр Петров]

SasS? А можно уточнить что это? Сами с SaaS не путаете? :)

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

да да. с ним и спутал... тяжко после выходных.

[zooks]

@Fesor SCSS - это тоже SASS. В LESS присутствует не совсем корректная работа оператора &.

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

@zooks, а в чем это проявляется, если не секрет?

[zooks]

@Fesor склеивает селекторы как строки

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

@zooks, а как правильно? Спрашиваю потому что ни разу не испытывал с этим проблем, раньше - да, а в последних версиях не особо, но хотелось бы знать когда будут проблемы.

[Анна Бакурова]

в less заметила что если писать стили высота строки в строку с шрифтом а пишется так font-size/line-height - то он просто значение размера шрифта делит на высоту строки, как это обойти?

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

@Libris есть такое дело, приходится писать так:
font: normal 1em e('/') 1.5 "Font Family";

[Анна Бакурова]

@Fesor именно с e ( e('/') )? писать 1em e('/') 1.5em

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

@Libris да, можно конечно и так: ~""
lesscss.org/functions/#string-functions-e

[Artem Denezhny]

старый — sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;
новый — SCSS (Sassy CSS) — использует фигурные скобки, как и сам CSS.

https://ru.wikipedia.org/wiki/Sass

Answer 3

[Александр Петров]

Stylus.
В топку двоеточия. В топчку точки с запятой. Туда же скобки. Прозрачные миксины.

Answer 4

[aumk]

habrahabr.ru/post/144309

Comments

[Петр Волханов]

@aumk Про такие препроцессоры css даже не слышал.. Сейчас погуглю. Чем он лучше?

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

@aumk, статья чуть чуть устарела, less теперь умеет многое из того, что доступно в scss. Некоторые другие пункты, типа определения переменных, довольно спорны.

[sim3x]

@aumk статья устарела полностью

Answer 5

[Артем Зинкин]

Выберите тот, что вам знаком.

Comments

[Петр Волханов]

@AiRiZzz Я пока не знаком ни с LESS, ни с SASS. Но смотрю в сторону LESS....

[Артем Зинкин]

@eprivalov, тогда LESS докуентаци локализована.

Answer 6

[zooks]

Рекомендую SASS (версия SCSS). Он намного функциональнее и более динамично развивается.

Подробнее изложено в статье Криса Койера:
habrahabr.ru/post/144309

Comments

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

Статья устарела. Сейчас разница между less и sass не настолько большая.

[zooks]

Главная разница в Ruby и Node.js.

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

@zooks, есть реализация sass/less на c++, php. Как по мне это вообще не главное.

[zooks]

@Fesor php... мсье знает толк в извращениях :)

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

@zooks, угу, причем на php помниться мне не одна реализация даже есть.

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

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

[zooks]

Николай Громов: странный ты, ответ пишешь спустя полгода после вопроса, комментарий - через год. Все устареет за это время.

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

zooks: да, что-то не посмотрел на дату )))

Answer 7

[nort1986]

тут верно подмечено, что в большинстве случаев это одно и тоже. Я советую использовать SASS (SCSS синтаксис).
Про сравнение less и sass хорошо описано здесь:
sass-lessons.ru
SASS получше, в если вы будете проект расширять, то только SASS.
Stylus пока еще сырой под него нет ни одной библиотеки миксинов, можно конечно постропессоры настроить, но это глупо. Используйте SASS и compas или bourbon в качестве библиотеки миксинов (префиксы)

Comments

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

SASS только SASS используйте SASS!

compas? серьезно? А как же postcss + autoprefixer? Миксины для префиксов не нужны вообще.

[nort1986]

Сергей Протько: у меня друг использует stylys, и там чтобы были префиксы он подключил postcss + autoprefixer, у него все так тормозит. И если честно я не совсем понимаю для чего использовать postcss + autoprefixer если все равно пользуешься препроцессором, это не логично, нужно что-то одно.

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

nort1986: нет, не логично хотеть чего-то одного. Ну и я использую autoprefixer вместе с less например, и оно работает достаточно быстро. Намного быстрее ruby-sass.

Суть postcss в постобработке. Изначальную структуру нам формирует препроцессор, а мелочи вроде префиксов, о которых париться вот вообще не хочется, можно возложить на постпроцессоры. Ну и много других прикольных вещей можно делать с постпроцессорами что бы вставлять хаки и кастыли для браузеров не завязывая на них свои стили.

[nort1986]

Сергей Протько: я ruby-sass не пользуюсь)))) У меня gulp-sass. Настраивал sass-компилятор с этого сайта
sass-lessons.ru/documentation
тут скорее зависит от того, кто к чему привык. Когда я less-ом пользовался я использовал для префиксов бутстрап, а на sass-е использую compas. Мне так удобнее. У меня друг использует postcss + autoprefixer вместе со stylys-ом. Могу сказать, что это все таки медленнее.
Препроцессор stylys компилирует css, потом постпроцессор его просматривает, и по новой его генерит. У меня вся компиляции занимает милисекунды, я как с обычным css работаю. А мой друг если торопится, что-то написал, сохранил, обновляет браузер, а там еще изменения не вступили в силу. Это больше секунды занимает. В данном случае я выбираю скорость.
На мой взгляд если используешь препроцессоры так и надо их использовать, если используешь постпроцессоры, то используй их. Иначе скорость теряется. все-таки.

[zooks]

nort1986: на самом деле autoprefixer - очень удобная штука. Задаешь количество поддерживаемых версий браузеров. Сам код не замусорен всякими ненужными функциями только ради префиксов. А Compass при этом можно вообще отключить - без него работает даже быстрее.

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

nort1986: A foolish consistency is the hobgoblin of little minds

[nort1986]

zooks: тут вы ошибаетесь, в compas все миксины вынесены в отдельный файл, у меня код не замусорен. Использую я в качестве sass компилятора плагин gulp-sass, с ним у меня даже проекты на 6 000 строчек (в итоговом CSS) компилируется за милисекунды (у меня подключен compas, свои миксины, и есть свой css-framework). Я не пробовал autoprefixer. У меня друг использует stylys под него нет библиотеки префиксов, и вот он использует autoprefixer, могу сказать, что я вижу, работает медленно. Компилятор stylys выводит css потом его autoprefixer просматривает, как ни крути получается медленно. Как я выше писал, он что-то написал, открыл браузер, перезагрузил и изменения в силу не вступили. Я могу предположить, что компиляция идет больше секунды, меня это не устраивает. А так штука удобная, но если ее использовать, то тогда лучше SASS, Stylys, less не использовать. Скорость не та. Если со всех сторон орут давай быстрее. То это заметно.

[nort1986]

Сергей Протько: right way go comrades)))) Раньше я в качестве компилятора пользовался prepros, а теперь пользуюсь gulp-ом. gulp-ом удобнее намного, если под себя его настроить.

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

nort1986: пользовался gulp-ом года так два назад, до него был grunt. Сейчас использую webpack, less или scss в зависимости от проекта, + postcss для того что бы перестать беспокоиться о этом бреде с префиксами. В итоге у меня необходимость использовать миксины возникает не так часто и только для реюза каких-то отдельных блоков.

Есть разные подходы к разработке, и мои подходы меня устраивают. Кричать что есть какой-то единственно вернвый подход как-то не ок. Учитывая что крутые чуваки (тот же гугл) отказались от добавления новых CSS штук под префиксами в пользу флагов.

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

nort1986: эра префиксов закончилась отделением blink от webkit.

[nort1986]

Сергей Протько: так я никому ничего и не навязываю))))

Я выше писал, что я пользуюсь gulp-ом и scss. У меня compass, свой css-framework и свои миксины (тут совсем не префиксы), я похожие свойства объединяю через @extend, а миксины использую чтобы задавать для них значения к примеру @include size(15px, 20px) я так размеры задаю. Эра префиксов конечно закончилась, но у меня на работе есть поддержка 8, 9 IE и подобных старых браузеров, для них еще нужны префиксы. Сейчас 10 винда вышла, говорят они отказались от поддержки IE, его там не будет, можно вообще про него забыть как страшный сон года через два))))

Просто у меня друг пользуется stylys и autoprefixer, я вижу, что работает это не очень быстро (где-то больше секунды). Наверно если использовать компилятор sass и autoprefixer результат будет таким же, меня это не устраивает, но я никому ничего не навязываю. Сколько разработчиков, столько и подходов, это нормально.

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

nort1986: больше секунды это нормально когда стилей под несколько десятков тысяч строк.

Ну и еще есть куча факторов, типа уменьшение обращений к диску и т.д. in-memory кэш и всякие другие извращения.

[nort1986]

Сергей Протько: я впринципе про это же и говорю. Я пользуюсь scss и у меня проект компилируется за милисекунды. Друг пользуется stylys и autoprefixer и у него проект компилируется дольше. Для меня это существенно, если я что-то сверстал обновляю браузер, а там изменения еще не вступили в силу, это очень не приятно. С другой стороны секунда это не много. Моего друга это устраивает. Ну устраивает и устраивает, проблем то нет. Сколько разработчиков. столько и подходов, это нормально.

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

nort1986: тут проблема не в autoprefixer а в stylus - это самый медленный препроцессор.

[nort1986]

Сергей Протько: возможно)))) он фанат stylys, ничем другим пользоваться не хочет. Нравится. ну и ладно, впринципе верстает он быстро и качественно. Тут кто к чему привык.

[zooks]

nort1986: если нужна дальнейшая поддержка, то лучше не использовать Stylus. Хотя на вкус и цвет товарищей нет. Говоря про функции, я имел в виду не миксины, а именно эти дурацкие вызовы @include display-flex;. Лично я против т.н. "постпроцессоров", но autoprefixer - действительно вещь.

[zooks]

nort1986: Compass, как я писал выше, действительно замедляет генерацию. За autoprefixer'ом такого не замечено.

[nort1986]

zooks: ну да, кому нравится рубиподобный синтаксис, тому лучше пользоваться stylys, тут вы абсолютно правы. Я про это уже писал, я похожие свойства группирую через @extend, а миксины использую для префиксов, или для быстрого задания свойств. К примеру @include logo(15px, 15px) у меня преобразуется в width:15px, height: 15px, display: block, text-decoration: none. Мне очень удобно, хотя кому-то это не нравится))) Это нормально.

zooks: вы меня немножко не понимаете. Я не пользуюсь ruby, я пользуюсь gulp-sass. Compas я скачал с github и подключаю в проект через "@import" , притом подключаю его не весь. Я подключаю:
"@import "compass/css3";
Dmitrijs Balcers "compass/utilities";"
Остальное мне не нужно. Компилирует мне код gulp-sass. У меня есть свой css-framework(на sass-е написан), есть своя библиотека миксинов (это не префиксы, это мои миксины наподобие того, что я выше писал). И у меня проект компилируется за милисекунды. Месяц назад я проект закончил, итоговая CSS-ка на 6 000 строчек, она со всем этим компилируется за милисекунды.

Я выше тоже про это писал, у меня друг пользуется stylys и autoprefixer'ом. И я видел как он работает. Он сделал изменение, обновил браузер, а они не вступили в силу, мы кое чего не успевали поэтому работали быстро. После этого я решил autoprefixer'ом не пользоваться. Смотрите он из stylys генерит css-ку, потом эта css-ка просматривается autoprefixer'ом и еще раз генерится (подставляются префиксы), я видел что работает это не быстро.

Если на то пошло, то если человек пользуется постпроцессорами, то пусть и пользуется ими, насколько я знаю, там можно и extend-ы делать и переменные задавать. Фактически постпроцессоры могут заменить less, sass и stylys. Просто смотрите при использовании препроцессора формируется css-ка и потом она просматривается постпроцессором. Это не может быть быстро. У меня проектна 6 000 строчек с миксинами, compas-ом и моим css-framework-ом генерится за 4 милисекунды. Получается потом autoprefixer будет его просматривать, тоже сгенерит префиксы за сколько-то, я сомневаюсь, что это быстро будет. Если пользоваться, то пользоваться чем-то одним, так быстрее будет. А так действительно штука хорошая, тут кто к чему привык.
Написано 4 минуты назад

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

nort1986: разговор зацикливается.

styles + что угодно будет в разы медленнее gulp-sass + autoprefixer как минимум потому что stylus в 10 раз медленнее чем libsass и в ~5 раз медленнее less. Сам же автопрефиксер работает очень быстро, так как нет операций с файловой системой и т.д.

Вы видили пример комбинации медленного препроцессора и быстрого пост процессора. Если вы добавите autoprefixer к своей сборке вы не почувствуете разницы особой в плане скорости компиляции. В этом суть.

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

[nort1986]

Сергей Протько: он такой медленный, не знал. Я думал проблема в autoprefixer. Тогда как-нибудь попробую. для меня скорость важна, если я ее не потеряю, то буду пользоваться. Просто я пример не удачный видел и в интернете пишут, что постпроцессоры медленные, я решил дело в нем. Тогда не пременно попробую.

[zooks]

nort1986: ты не понял, я про использование compass только для префиксов - это оно излишне и замусоривает код. Тоже использую gulp-sass для libSass, а не реализацию на Ruby из-за скорости. Так что отбрось все страхи и тестируй autoprefixer в деле.

[nort1986]

zooks: это я уже понял, обязательно попробую.