В чём преимущества использования sass?

Question

[Александр]

Верстаю уже больше года, очень хорошо знаю css3, начал читать об ускорении верстки и все как один говорят: Используйте препроцессоры, полистал лучшие, многие рекомендуют sass, так вот, сильно ли он ускорят работу? На сколько процентов, хотя бы приблизительно? Может кто-то тестил? Может есть препроцессоры быстрее? Потому что один человек говорит, что без них лучше, другой, что это необходимо. Хотелось бы увеличить скорость верстки и подготовки макета к сдаче, но не знаю, стоит ли тратить на sass время.

Comments

[sim3x]

А как нормально можно использовать бутстрап без сасс?

[Александр]

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

[sim3x]

Александр, Ну вот о чем и речь. Как отсечь лишнее без сасс?

[Александр]

sim3x, не понял вопроса.

[sim3x]

Александр, как убрать из bs все лишнее без сасс?

[sim3x]

Егор Скороходов, а зачем, если проще поправить в файле импорта?

[Александр]

Егор Скороходов, я на это еще год потрачу ))

[Александр]

Егор Скороходов, Так мало? Тогда, думаю, за пол года справлюсь! :-)

Answer 1

[SagePtr]

Ещё один пример применения препроцессоров - работа с цветами
Гораздо проще присвоить базовый цвет переменной и от него потом плясать, чем каждый раз вычислять новый цвет в фотошопе и копировать его шестнадцатиричный код.
А если потом на всей странице понадобилось заменить базовый цвет - то не придётся заново вычислять все остальные цвета и менять их, достаточно будет поменять значение переменной

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

Comments

[Александр]

Ну наконец, хоть что-то полезное. Спасибо, приму к сведению.

[SagePtr]

Александр, ещё мне недавно очень пригодилось с размерами, когда дали макет в фотошопе, где всё было в пикселях, а надо было отмасштабировать в процентах, там я вместо того, чтобы проценты считать, просто задавал величины наподобие width: 120 * $scale (где 120 это величина в макете в пикселях, а $scale равнялось 100vw, делённых на ширину макета).

Answer 2

[Андрей Саныч]

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

Comments

[Александр]

я бы так не сказал, написать пару слов для меня не проблема и по времени тут выиграешь от силы 5 минут, которые потратишь на установку и компиляцию в обычный css

[Максим Тимофеев]

Александр, дело в повторном использовании кода, в редакторе и кучи других нюансах, которые при работе с обычным css вызывают боль и страдания. Плюс на компиляцию Вы еще повесите минификатор и автопрефиксер какой-нибудь и вот уже еще больше выгоды.
Если у Вас проекты на 50 строк css - то не надо конечно.

[sim3x]

Максим Тимофеев,

автопрефиксер

*если верстаете под старые браузеры

Answer 3

[Максим Тимофеев]

На сколько процентов, хотя бы приблизительно?

34,5% - замерял циркулем

Потому что один человек говорит, что без них лучше, другой, что это необходимо

Проверьте качество могза у первого и второго, убедитесь, что они оба понимают о чем говорят.

все как один говорят: Используйте препроцессоры

так все или один?

ПС: я даже не вижу смысла серьезно отвечать. Небо синее, трава зеленая, препроцессоры ускоряют разработку. Они созданы для этого. Кто Вам сказал обратное? Человек с лопатой в руках у подъезда? Так он не про вентиляторы на компьютерных процессорах наверное.

Comments

[Александр]

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

[Максим Тимофеев]

Вопрос был в том, на сколько ускоряют и стоят ли они траты времени

чем Вам это не ответ:

препроцессоры ускоряют разработку. Они созданы для этого.

?

думать о том, что мнения не должны отличаться может только человек с небольшим объемом серого вещества

мнения могут, а вот объективная реальность меняться не может. Между мнением и идиотизмом есть грань и тот кто Вам сказал, что препроцессоры не ускоряют разработку - явно ее перешел
Это мое мнение, если хотите

[Александр]

Где написано, что они не ускоряют, я сказал, что без них лучше? А сказал мне это человек к которому я хотел устроиться на работу, он старший разработчик и на его вопрос о использовании мной препроцессоров я ответил, что не использую, на что тот мне сказал, что так даже лучше. Придумывать факты и опираясь на них оскорблять человека и использовать выдуманный аргумент для подтверждения точки зрения не характеризует вас как учителя, на что намекает ваша краткая информация о себе.

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

дело в повторном использовании кода, в редакторе и кучи других нюансах, которые при работе с обычным css вызывают боль и страдания. Плюс на компиляцию Вы еще повесите минификатор и автопрефиксер какой-нибудь и вот уже еще больше выгоды.
Если у Вас проекты на 50 строк css - то не надо конечно.

Какие-то лопатки...

[Максим Тимофеев]

Александр, это лишь верхушка айсберга. Там если начать описывать - учебник получится. Там и переменные и циклы и миллион того чего Вам давно не хватало. Вы вникните, хотя бы краями и Вам станет понятно почему именно это основной ответ)))

[Александр]

Максим Тимофеев, Так я и хотел что бы мне вкратце объяснили. Я учусь, работаю. Когда я пишу вопрос на тостере, я хочу получить грамотный, лаконичный и четкий ответ, но когда вижу глупости, сарказм и иронию без намека на информативность, у меня возникают не лучшие эмоции.

[Максим Тимофеев]

Александр,

я хочу получить грамотный, лаконичный и четкий ответ

Я хотел написать лаконично, но решил, что это грубо.

[Александр]

Максим Тимофеев, в таком случае вам стоит поучиться учить. Кст, глянул тут ваш урок, этот совет вам бы очень пригодился, да бы с такой подачей можно только "отвечать" на вопросы в ироничном ключе.

[Максим Тимофеев]

вам стоит поучиться учить

я не преследую цель научиться учить, зачем мне это? Если бы хотел - тогда да, если бы был педагогом - да, а так не понимаю зачем? Можно еще научиться строить дома или выращивать овец, почему именно "учить"? Я же не преподаватель.

[Александр]

Учим yii: https://youtu.be/-WRMlGHLgRg

[Максим Тимофеев]

Александр, это мой блог. Я даже многократно там говорю, что это не учебное пособие и я не педагог. Это блог про framework yii2. Да многие используют его как учебное пособие и да он во многом на него похож, но это блог а не учебник, это не значит, что человек, который сделал что-то и это что-то кому-то понравилось, срочно должен довести это до идеала и сделать учебным курсом. Нет такой цели.
Это же ютуб,там есть куча других проектов про yii, там отличные педагоги возможно. Можно сходить туда, можно ко мне. С чего вдруг это должно накладывать на меня обязанность учить педагогику? Есть люди (около 2k) которым это нравится именно в таком виде, с чего вдруг Вы решили что-то поменять? Сделайте свой лучше - это же будет отлично. Больше контента!!!

[Александр]

Максим Тимофеев, Там даже в комментарии написано "Спасибо за хорошие уроки.", комментарий, который вы не опровергли, если это не уроки, то что? Вы даже там ныть в ответе умудряетесь. Мало того, в статусе написано "Учим", если обучать людей - это не педагогическая деятельность, то что? Книжки, говорят, речь и подачу развивают. Ладно, бессмысленный разговор. Продолжайте вести свой блог посвященный обучению людей, говоря, что это не обучения, а блог. А я буду разговаривать с людьми с лопатами и каждому встречному проверять мозг.

[Александр]

Максим Тимофеев, не, ну менять комменты после получения ответа на него, это гениально! Вы просто мудрец!

[Максим Тимофеев]

Продолжайте вести свой блог посвященный обучению людей, говоря, что это не обучения, а блог

постараюсь, спасибо

[Максим Тимофеев]

webdev341, на что?

[Максим Тимофеев]

webdev341, это же весело

Answer 4

[id_baton4eg]

Кратко подытожу своим мнением, чтоб не включаться в срач - пальцы уже чешутся)))

Сильно ли ускоряет ?
Да, сильно

На сколько в % ?
Значительно в %, успевал бы соображать, а если бы еще знать все фичи...

Может кто-то тестил?
Может))

Может есть препроцессоры быстрее?
Может и есть, в массовом "производстве" мной лично пока не замечены.

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

Время стоит тратить не только на sass, но и на самообразование в целом, иначе как вам узнавать что появилось что-то более достойное))

Answer 5

[Anubis]

Мне очень помогает scss, наиболее часто выручают вложенность, переменные и утилиты (типа смешивания цветов), иногда пользуюсь циклами и миксинами.
После следующим шагом при сборке проекта отдаю полученный css, собранный из scss исходников, в postcss - для оптимизации вложений media query и автоматического добавления вендор-префиксов.
Всё это реально ускоряет работу, даёт удобный вспомогательный инструментарий и однозначно стоит пары дней, потраченных на ознакомление и настройку сборщика проекта для работы с scss и postcss (или их аналогами).

Answer 6

[hesrun]

Причины:
1. Да, он ускоряет. Вложенность очень помогает, я около 3 лет сидел на чистом css, scss попробовал только для собственного развития и подсел. Уже 3-4 года использую и когда верстаю без него уже начинаю тупить. Очень полезно использовать переменные, ОЧЕНЬ!!! К примеру есть дизайн. Кнопка оранжевая, ховер не отрисован тупо пишем lighten, darken затемняем или засветляем кнопку. Как ни странно циклы очень полезны, когда нужно что-то повторное писать через nth-child.
2. Порядок!!! Как ни странно при использовании сасса, ты приходишь автоматом к порядку. Переменные в одно место, миксины в другое, все инклюдишь и получаешь аккуратную css-очку. Хошь или нет, но только с ним ты придешь к этому.
3. Развитие!!! Опять же, если Вам придется работать с большими фреймворками типа BS, семантика, материалайза, мобильных фреймворков типа Ionic, там стилизовать или допилить какие-то вещи в css, очень сложно! Очень! И как только будете касаться более серьезных вещей, Вам придется в нем разбираться.

Все выше сказанное только мое личное мнение и опыт... Я так же как и вы какое-то время, тоже отнекивался от него... Тем не менее имеем, что имеем...

Comments

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

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

[hesrun]

shure348, а чем будет отличаться цсс скомпилированный из сасса, к тому который вы будете писать ручками...? Миксины, переменные не во что не комплириются, они просто идут в цсс. Ну и тем не менее комментирование блоков никто не отменял, в этом будет и Вам удобно и другой спасибо скажет. Не вижу тут вообще сложностей.