ТОП 5 преимуществ CSS препроцессоров (LESS, SASS / SCSS, Stylus). Какой препроцессор css лучше

В этом видео разбираем основные преимущества самых популярных CSS препроцессоров (LESS, SASS / SCSS, Stylus): переменные, импорты, вложенность, миксины, функции.

Мы продолжаем серию видео уроки верстки для начинающих. Сегодня мы разберем топ 5 преимуществ CSS препроцессоров. нужны ли препроцессоры css, какой препроцессор css лучше, и отвечу на вопрос препроцессоры css какой выбрать. Обсудим в целом css преимущества недостатки. Препроцессоры используются для фронтенд сайта, чтобы верстка страницы css была удобнее и позволяет гораздо быстрее переделать оформление сайтов css. Поэтому если вы часто сталкиваетесь с задачей изменить css на сайте. То препроцессоры css могут в этом помочь. один из популярный - less препроцессор css

=======================================

Препроцессоры:

[prosto_razrabotka]

Не забудьте заглянуть сюда:

Можете добавиться в друзья:

А так же, подписаться на страницы:

[ИсламАбдукеримов-ъп]

В каждой среде есть свой крутой лысый))

[Max-krie]

А теперь подробно и обо всем и с практическими примерами и вообще топчик)) прикольный стиль заставок лысый на желтом фоне))

[ДенисКлименко-нп]

Это видео оказалось третьим по препроцессорам которое я посмотрел. До этого оба почти по 40 минут и толку 0, одна вода!
Тут же за 10 минут все четко и по теме, да ещё и с примерами!!! Большое спасибо за видео!

[КонстантинБуря-дб]

1) в обычном в css есть "переменные", можно использовать для цветов. 2) Есть такое понятие как сборка, там css может собираться в один, либо вообще вставляться сразу в html тегов style, и кол-во запросов будет минимум. 3) миксины норм. 4) Ну осветлить можно и при помощи фильтра

[ДмитрийМорозов-мы]

Виталий, я согласен с
Max Shevchenko, что нужны примеры, так сказать практическое закрепление пройденного!!

[AbraKadabra]

Спасибо! Есть ещё PostCSS-cssnext это когда мы пишем цсс будущего а оно нам его превращает в тот в который умеют современные браузеры.

Это позволит в будущем отказаться от препроцессора полностью 😏

[ДаниилСоболев-щщ]

По поводу цветов. Дефолтный css позволяет использовать переменные, очень просто.
По поводу импортов. Дефолтный css тоже так умеет.
По поводу вложенностей. Удачи вам разобраться в такой портянке, когда проект разрастётся. При грамотном форматировании css тоже можно читать.
Миксин - синтаксический сахар. Экономия времени 2 секунды. Если она вообще есть, т.к. автоимпортов в scss насколько я знаю нет ( поправьте если я не прав ).
Функции. За свой опыт я не сталкивался с такими ситуациями, когда calc не решал мои задачи. С цветами ужасный пример. т.к. дизайнер в ui ките обязан перечислить все цвета, используемые в проекте.
Итого, дополнительная зависимость на проект, велик шанс провалиться и запутаться во вложенности ( не дай бог это будут миксины ), сложности в переносе проекта ( всё время вываливаются ошибки ), но, соглашусь, удобная система дополнения имён через амперсант, если использовать бэм или его аналоги.
И ещё в защиту скажу что видел сложные качественные анимации на препроцессорах, но страшно представить какие бандлы из них получаются.
Всем добра.

[dominc]

Огонь! Максимум полезной информации и минимум воды.

[ПажилойМаслач-эм]

Огромное спасибо за крутой плейлист! Очень круто что все быстро и с примерами.

[alinafitisova]

класс, спасибо за детальное объяснение, ждем видео о сборщиках.

[appatichno]

Спасибо, хоть кто то объяснил для чего вообще это нужно

[xSxVKaJnwQ]

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

Вложенность - вот чего не хватает css.
За видео спасибо!

[sevafadeev]

очень подробно и понят, спасибо за видео!

[goldez]

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

[dmytromamenko]

спасибо за работу !!!всё коротко и понятно

[kostyaproga]

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

[eugenedavidoff]

Спасибо за видео, но есть одно замечание: слово height произносится как "хайт", а не "хейт".

[КириллБайшников]

Спасибо за видео, теперь осознал, что это за птица такая scss.

[SingleFeniks]

Абсолютно не важно какой препроцессор выбрать для проекта?! Да Вы что, конечно же это важно! Все зависит от проекта, от его структуры, того как там расположены модули и компоненты и вообще что они из себя представляют.
У каждого препроцессора есть свои недостатки, из-за которых он может просто не подойти для конкретного проекта, на вскидку: SASS не умеет в относительные url при инклюде, LESS умеет, но в нем нет некоторых полезных вещей, которые есть в SASS и т.п.. При работе с React сейчас все коллеги переходят на CSS-in-JS, хотя препроцессором его назвать сложно - это уже другое.