Препроцессоры SCSS/SASS. Все, что нужно знать для старта

  Рет қаралды 106,347

От 0 до 1

От 0 до 1

5 жыл бұрын

Привет, друзья! Это подробное руководство по препроцессорам scss и sass для начинающих. Вы познакомитесь с препроцессорами, узнаете как их подключать к проекту, в чем их преимущество, почему их так важно использовать и почему при устройстве на работу вас о них спрашивают. Ну и конечно же узнаете разницу между scss и sass. Я дам рекомендацию о том какой препроцессор когда нужно использовать.
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Ссылка на сайтец scss/sass:
sass-scss.ru/
Видео о сss grid:
• CSS Grid - верстка буд...
Верстка сайта он начала до завершения:
• Верстка сайта с нуля д...

Пікірлер: 201
@homaas7150
@homaas7150 Жыл бұрын
За 30 минут всё что нужно для практики, ничего лишнего. Спасибо:)
@tuRistst
@tuRistst 4 жыл бұрын
Почему я раньше не находил тебя? Эти уроки просто настоящая жила для всех моих пробелах в верстке! Спс!
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
спасибо
@dagmans
@dagmans 2 жыл бұрын
согласен, замечательная работа, все ясно
@Aurum26ENR
@Aurum26ENR 2 жыл бұрын
Добавлю немного для новичков. Для того, чтобы вы могли писать на scss, а компилировался файл в css через программу Коала, саму программу Коала закрывать не следует, в момент компиляции она должна быть открыта и видна на панели задач!
@aleksandrglushchenko506
@aleksandrglushchenko506 3 жыл бұрын
Дружище не бросай коучинг, у тебя дар, объясняешь быстро понятно и очень круто. Спасибо
@user-sc8nh8tq7r
@user-sc8nh8tq7r 3 жыл бұрын
Это просто подарок какой-то! Спасибо вам!!!
@alexdivola
@alexdivola 4 жыл бұрын
До этого видоса думал что препроцессоры это что-то сверхсложное и нужно минимум неделю изучать. Спасибо за введение в эту технологию) Следующий макет начну верстать уже на SCSS.
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
круто, рад что помог
@stanislavahrafenin424
@stanislavahrafenin424 5 жыл бұрын
С чувством и расстановкой) Спасибо!
@_bond_1013
@_bond_1013 5 жыл бұрын
Круто, спасибо, раньше даже не знал зачем они нужны)
@AggeJl0c44
@AggeJl0c44 2 жыл бұрын
Огромное вам спасибо 🤗 Всё понятно, всё чётко 👏🏻👏🏻❤️
@aleksius7819
@aleksius7819 4 жыл бұрын
Хорошо и доходчиво рассказал, спасибо за твой труд.
@user-vh9bu3bf1y
@user-vh9bu3bf1y 3 жыл бұрын
Просто лучший!!! Подача пушка! Не бросай канал только, у тебя дар объяснятся нормально!
@enterkvas
@enterkvas 3 жыл бұрын
Огромное спасибо! Почерпнул много полезного. Как говорится: "Век живи, век учись". Успехов!
@user-bj8oe1gt3r
@user-bj8oe1gt3r 2 жыл бұрын
спасибо тебе огромное, самое понятное руководство по scss которое я только смог найти!
@weslleytroy4727
@weslleytroy4727 3 жыл бұрын
Посмотрел это видео, и сразу нажал подписаться! Коротко , доступно и по делу! Спасибо!
@timi1255
@timi1255 2 жыл бұрын
Лучший учитель которого я только встречал 👍
@vadymprokopchuk
@vadymprokopchuk 2 жыл бұрын
спасибо)
@user-qn7ti7tx4i
@user-qn7ti7tx4i 3 жыл бұрын
Вадим, молодец, очень понятно все объясняешь!!! Спасибо))
@user-or6hp6zz5z
@user-or6hp6zz5z 3 жыл бұрын
Лайк на первых минутах. Спасибо за чёткую подачу инфы!) Продолжай делать такой же крутой контент, тебе воздастся за хорошие поступки такие))
@otabektoshturdiyev356
@otabektoshturdiyev356 3 жыл бұрын
Чувак большое спасибо тебе я раньше думал что эти двое очень сложнее но оказывается простой.
@jizikjizik71
@jizikjizik71 4 жыл бұрын
Спасибо за видео, пойду верстать уже через SCSS
@user-nd4bq3cz9l
@user-nd4bq3cz9l 4 жыл бұрын
Спасибо за урок. Оказалось всё не так сложно. Наконец-то поняла разницу между scss и sass. Творческих успехов и процветания!
@whenyousleeeep
@whenyousleeeep 4 жыл бұрын
После одного просмотра этого видео сразу начал использовать scss в работе, до этого думал, что это какая-то сложная технология и до последнего обходил стороной, спасибо!
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
очень круто
@Geimer6841
@Geimer6841 3 жыл бұрын
Спасибо за видео, быстро и чётко объяснил
@user-oj9vt5xn1y
@user-oj9vt5xn1y 2 жыл бұрын
Благодарю за такое крутое объяснение, все ясно/понятно!!!)
@user-oz3ft2le7x
@user-oz3ft2le7x 4 жыл бұрын
Много новых и полезных нюансов узнал о препроцессорах! Благодарю Вас, очень доходчиво и талантливо доносите информацию, она быстро впитывается и запоминается.
@eduardgrigoryan6052
@eduardgrigoryan6052 3 жыл бұрын
Спасибо большое. По сути от вас я учусь больше чем я учился на курсах ...
@ProfessoRGM
@ProfessoRGM 5 жыл бұрын
Видео - огонь! Огромное спасибо! Вы очень круто объясняете.
@AggeJl0c44
@AggeJl0c44 2 жыл бұрын
Согласен ))
@konstantinreut2577
@konstantinreut2577 2 жыл бұрын
It was very useful! Thank you, Vadim!
@aigerimseitova5399
@aigerimseitova5399 3 жыл бұрын
Здравствуйте! крутые уроки, спасибо вам огромное. Но, хотелось бы на этом уроке про миксины тоже узнать
@nika_lletka
@nika_lletka 4 жыл бұрын
Круто! Очень классно все объяснил, смотрела не отрываясь. Удачи в успехах, с меня лайк и подписка х)
@ericraudy
@ericraudy 4 жыл бұрын
Очень понятное и толковое объяснение. Благодарю! Еще бы шрифт покрупнее сделать в IDE, а то даже в полноэкранном режиме на 1080 плоховато видно. А так всё круто! Требую продолжения банкета!))))
@viktoriakrasiuk2000
@viktoriakrasiuk2000 3 жыл бұрын
Все очень понятно и интересно Спасибо за видео
@sanjarabakirov7116
@sanjarabakirov7116 2 жыл бұрын
Отличное обучающее видео! Респектую!
@bipolarcw
@bipolarcw 3 жыл бұрын
спасибо! все понятно разложил по полочкам
@user-zc6xe6re8t
@user-zc6xe6re8t 2 жыл бұрын
огромное спасибо за урок! многое стало понятным)
@user-ri1ry7sx6p
@user-ri1ry7sx6p 4 жыл бұрын
Подписка, лайк однозначно. Очень доходчивая подача материала.
@maksworldwebboy1119
@maksworldwebboy1119 11 ай бұрын
Урок просто зачьот 👍, буду рекомендувати це відео тим хто хоче перейти на scss.Автору великий респект
@blacksmith5117
@blacksmith5117 2 жыл бұрын
Отличный урок, спасибо
@ertargn
@ertargn 5 жыл бұрын
автору спасибо.. продолжай в том же духе. все понятно объяснил. определенно стоит подписки
@vadymprokopchuk
@vadymprokopchuk 5 жыл бұрын
Спасибо)
@user-gp1dj8ro8k
@user-gp1dj8ro8k 4 жыл бұрын
дякую за відео,доступно,корисно,продовжуй.!
@juliaavona2906
@juliaavona2906 Жыл бұрын
спасибо! Это видео упростило мою жизнь)
@vadonfit9269
@vadonfit9269 2 жыл бұрын
офигенный урок, вспомнил препроцессоры за 30 мин, реально за 30 ))
@vikogr200
@vikogr200 4 жыл бұрын
Большое спасибо. Очень доходчиво.
@HearonPlay
@HearonPlay 4 жыл бұрын
Спасибо за твой контент! Помог
@cy66a
@cy66a Жыл бұрын
Спасибо за видео! Я для перевода SASS(SCSS) в CSS использую не приложение, как в видео, а расширение для VSCode, которое называется Live Sass Compiler. Это удобно для небольших проектов или обучения. А для чего-то побольше уже лучше использовать тот же GULP. Всем успехов!
@MrSantafe1100
@MrSantafe1100 2 жыл бұрын
до твоего видео не понимал зачем вообще препроцы. спасибо тебе!!!
@VENOM-rl5eo
@VENOM-rl5eo Жыл бұрын
Вот бы мне таких учителей в школе)
@justspartak
@justspartak 4 жыл бұрын
Cпасибо! Хорошее руководство для начинающих.
@kiunsama1881
@kiunsama1881 3 жыл бұрын
рзизижуҟаҽҽаҽажпжппжжжмзвзфхц ҩвжаабпдпд
@kiunsama1881
@kiunsama1881 3 жыл бұрын
брпжпҩпзмҩмдсдраспкпжыыфжџч бы
@justspartak
@justspartak 3 жыл бұрын
@@kiunsama1881 наркоман?
@Infinity-zf8ms
@Infinity-zf8ms 3 жыл бұрын
Огромное спасибо за это видео)
@543769bobo
@543769bobo 3 жыл бұрын
Посмотрел и Gulp, отличная работа, Подписался!
@Huibobra104
@Huibobra104 3 жыл бұрын
мне кажется, что ты лучший
@alexkodding9354
@alexkodding9354 3 жыл бұрын
Вадос уже полгода обучаюсь на твоих роликах и не перестаю убеждатся что ты действительно талантливый учитель. Спасибо огромное 👍 низкий поклон )
@danilaundead4760
@danilaundead4760 2 жыл бұрын
Ты пол года учишь вёрстку ?) Ты учишься 1 раз в неделю пару часов? Или как?
@alexkodding9354
@alexkodding9354 2 жыл бұрын
@@danilaundead4760 если у тебя получилось быстрее я только рад за тебя друг)
@T2kibi
@T2kibi Жыл бұрын
@@alexkodding9354привет, как успехи по учебе ?)
@alexkodding9354
@alexkodding9354 Жыл бұрын
@@T2kibi норм, а что?
@T2kibi
@T2kibi Жыл бұрын
@@alexkodding9354 ничего ) Сам только начал учится, интересно узнать как другие ребята учились )
@lastley7886
@lastley7886 Жыл бұрын
Полезное видео, спасибо тебе.
@waker_777
@waker_777 4 жыл бұрын
Как всегда доходчиво и кратко ! Единственный кому хочется оставить комментарий для поддержки !)
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
спасибо, ценю
@qetosf
@qetosf 3 жыл бұрын
Спасибо за урок!
@yarovyy_max
@yarovyy_max 3 жыл бұрын
Супер урок. Спасибо
@M27B_our_victory
@M27B_our_victory 3 жыл бұрын
Thank you bro!) You are the best, man!)
@dmitrijponkin
@dmitrijponkin 4 жыл бұрын
Спасибо! Очень круто :)
@happymax9059
@happymax9059 4 жыл бұрын
Спасибо! Очень нравится то, что ты грамотно и доступно объясняешь материал. Успехов тебе!)
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
спасибо
@kiunsama1881
@kiunsama1881 3 жыл бұрын
сж вы ҽввҽвҽажаҽаҽкҩкхкӡккдкзкдкзкжзазк
@kiunsama1881
@kiunsama1881 3 жыл бұрын
@@vadymprokopchuk зцжвжаҩпҩжа!ажсжсжвжад
@kiunsama1881
@kiunsama1881 3 жыл бұрын
пбпивычрв ҩстҽчс сЧыи
@kiunsama1881
@kiunsama1881 3 жыл бұрын
клӡуудкзкдкӡкдкӡедпӡпд
@sanzharabdurahmanov6988
@sanzharabdurahmanov6988 3 жыл бұрын
Под этим видео должно быть минимум 🍋 просмотров, лайков и подписок! Что за аномалия такая? Благодарю тебя баратец за такой годный контент. Успехов больших, продолжай в том же духе. Лайк, подписка, колокольчик обеспечены, 💯!
@user-ql4xu5qu2u
@user-ql4xu5qu2u 2 жыл бұрын
Столько верстальщиков во всем мире не наберется
@user-ql4xu5qu2u
@user-ql4xu5qu2u 2 жыл бұрын
@@sanzharabdurahmanov6988 никогда не сомневайся)
@skywalker2090
@skywalker2090 4 жыл бұрын
Просто супер, все понятно и доступно объяснил. Особенно позабавил холор, теперь мы знаем что было бы если css создавали украинцы))
@Ruslan_Emurlaev
@Ruslan_Emurlaev 3 жыл бұрын
Хорошее видео! Спасибо!
@KIMI-lz5ym
@KIMI-lz5ym 3 жыл бұрын
Классно. Спасибо большое!
@dinargabitov3572
@dinargabitov3572 3 жыл бұрын
Спасибо за видео. Показываешь куда и как, неплохо объясняете (без обид. из за чего субтитры коряво перевели). А так все ок. До этого думал, что сложный и запутался (по началу, да), т.к. я старый поколение)) но все понятно. Вы демонстрируете пишете код, а я вас повторяю. Пока не могу решить, что выбрать sass или scss. Я бы предпочел выбрать scss, т.к. привык писать код со скобками и точка запятая. В общем поставлю оценку 10/10, в том числе лайк ;)
@shortVideoIP
@shortVideoIP 5 жыл бұрын
Спасибо за видео, Scss это тема вообще, как раз попробовал уже не представляю верстку без него, не знал что в rgba можно решетку ставить)) Я вот только начал путь в it компании и могу посоветовать снять видео с стандартными ошибками и недочетами новичков, например лишние области, баги распространенные, неправильные реализации слайдера,попапа и тд, можно взять верстку какого то новичка и разобрать, думаю полезно будет, ибо токо на работе узнал про кучу ошибок, о которых и не знал вообще, ибо нигде не видел что бы кто то показал что у li-шек даже после обнуления отступов например есть 3 px примерно расстояние между собой и тд. Таких моментов куча и нигде не освящаются они в обучениях. В слайдере например многие когда нужно сделать на весь экран картинку которая меняется со слайдом кидают ее на bg, хотя это усложняет со стороны клиента замену картинки и тд. Вообщем удачи в развитии канала, очень хороший контент)
@vadymprokopchuk
@vadymprokopchuk 5 жыл бұрын
Спасибо за ценные советы, рад, что открыл инфу про # в rgba
@sergei-sabitov
@sergei-sabitov 5 жыл бұрын
у этого чувака плейлист Repozitorro kzfaq.info/love/E9ODjNIkOHrnSdkYWLfYhg
@logizm9431
@logizm9431 Жыл бұрын
Единственный кто нормально объяснмл SASS SCSS
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
благодраю
@jek126
@jek126 4 жыл бұрын
Спасибо большое вам !
@_pheax
@_pheax 3 жыл бұрын
спасибо, классно обьясняете
@user-lt7cf5qq8j
@user-lt7cf5qq8j 4 жыл бұрын
Огромное спасибо.
@den3212
@den3212 2 жыл бұрын
Таймкоды для урока: 2:00 установка Koala 2:55 настройка scss файлов 5:45 вложение в scss 10:17 символ амперсанд (&) 12:58 использование переменных в scss 17:30 создание часто повторяемых свойств 21:35 особенности background-color в scss 22:50 отличие sass от scss 29:15 совет где использовать sass и scss
@novikov-pavel
@novikov-pavel Жыл бұрын
Это сообщение надо прикрепить.
@_SOMEONE_
@_SOMEONE_ 4 ай бұрын
Спасибо
@PhiLiN58
@PhiLiN58 4 жыл бұрын
Как всегда ТОП ✌️😎
@user-dw4ru1tk9f
@user-dw4ru1tk9f 4 жыл бұрын
спасибо, Вадим
@samiroutka
@samiroutka Жыл бұрын
Спасибо большое, помог
@user-uc9bg2tw8l
@user-uc9bg2tw8l 4 жыл бұрын
круто, как и всегда
@OleksandrPohribnyi
@OleksandrPohribnyi 4 жыл бұрын
Если честно, то ты лучший на KZfaq в плане обучения для меня, по сравнению с webdesign master прям все четко и по полочкам. Я пытался научиться по его видео и просто ничего не понимал, а после твоих видео на одном дыхании за час)
@dvsDesing
@dvsDesing 4 жыл бұрын
Тоже, пробовал по его работам делать и просто погрузал и стопорился:( а вот Вадим вернул веру в свои силы))
@user-ey1eq4ch4j
@user-ey1eq4ch4j 3 жыл бұрын
Не рекламы ради: есть еще один толковейший гуру: kzfaq.info Женя Андриканич Тоже очень понятно излагает. Смотрю только его и автора этого замечательного канала - Вадима Прокопчука.
@user-bg2bg4qh4g
@user-bg2bg4qh4g 2 жыл бұрын
дзякуй!
@user-je9uu9ui8d
@user-je9uu9ui8d 8 ай бұрын
Выражаю благодарность из сентября 2023 года!
@bergghest
@bergghest 2 ай бұрын
Как всегда топ
@candy_front
@candy_front 4 ай бұрын
Лучший учитель
@vadymprokopchuk
@vadymprokopchuk 3 ай бұрын
Спасибо
@euStiuMaiBine
@euStiuMaiBine 4 жыл бұрын
Great work!
@user-bc5bt1fb5y
@user-bc5bt1fb5y 4 жыл бұрын
Спасибо, информативно.
@vadymprokopchuk
@vadymprokopchuk 4 жыл бұрын
спасибо
@kiwisolives
@kiwisolives 4 жыл бұрын
Классно, подписался!
@_Iokanaan_Marusidze_
@_Iokanaan_Marusidze_ 4 жыл бұрын
Благодарю !
@uultayarstankulova6132
@uultayarstankulova6132 4 ай бұрын
спасибо большое
@elenaga4585
@elenaga4585 4 жыл бұрын
Максимальный бал ! и лайк
@romanmed9035
@romanmed9035 3 жыл бұрын
вот сначала я посмотрел ролик 2020 года, а теперь 2019 и впечатление неопределенное. обычно вначале все плохо, а потом уже привыкается и вырабатывается навык. тут как-то кажется наоборот. елси бы не даты под видео, я сказал бы что это вышло позже, чем предыдущее. конечно не мне учить видео снимать. я и такое не сделаю. но предлагаю автору самому посмотреть и сравнить и на основании увиденного сделать вывод и принять решение. какое оно будет это конечно уже дело самого автора. но от себя повторюсь, что текущее понравилось в несколько раз больше более нового. даже больше. это вообще очень понравилось своим изложением и подходом к делу. не хуже тех у кого миллионы просмотров и отметок.
@_Kawaii_Senko_
@_Kawaii_Senko_ 3 жыл бұрын
Спасибо большое)
@mbreti362
@mbreti362 4 жыл бұрын
Мне бы для начала научиться к верстке:(
@WhiteBear141981
@WhiteBear141981 3 жыл бұрын
Спасибо!
@Sward66
@Sward66 3 жыл бұрын
5:43 - Вложенные селекторы 10:17 - Использование знака & (амперсанд) 12:56 - Переменные 16:50 - Шаблоны 21:26 - Возможность написания цвета rgba в hex. Например background-color: rgba(#12dc31, 0.9), в css получится background-color: rgba(18, 220, 49, 0.9); Для полного счастья не хватает @import'a :)
@rec5131
@rec5131 4 жыл бұрын
Круто. Все Sassно 👍
@amatorBolivarGames
@amatorBolivarGames 4 жыл бұрын
Спасибо Джон Сноу =)))
@resenpaii
@resenpaii 4 жыл бұрын
годно, подписался)
@orkhanakhmadov474
@orkhanakhmadov474 4 жыл бұрын
otlicno. spocibo bam)))
@akmiable
@akmiable 5 жыл бұрын
Спасибо!!!
@kiunsama1881
@kiunsama1881 3 жыл бұрын
пьрчлфшыашпӡпжпжзп!схс!мхпҩпӡпдмзмдмдмӡмбрдм пда
@sauronin2058
@sauronin2058 4 жыл бұрын
очень даже годно
@user-me5ul3pd7m
@user-me5ul3pd7m 5 жыл бұрын
Бомба
@brodyagaPATY
@brodyagaPATY 4 жыл бұрын
Для sass же есть в VSCode препрос.... мне кажется удобней
@galandec2000
@galandec2000 3 жыл бұрын
я начал с Less... но везде требуют SCSS. та что, лучше с его и начинать. хотя перейти с одного на другое, не сложно.
@user-di6gk6cf3f
@user-di6gk6cf3f 4 жыл бұрын
Скажите пожалуйста, как реализуется возможность вложенности, если используется БЭМ? ведь тогда нет вложенности
@user-wu4ok4kl2u
@user-wu4ok4kl2u 2 жыл бұрын
Ти очень Крут🤛
Black Magic 🪄 by Petkit Pura Max #cat #cats
00:38
Sonyakisa8 TT
Рет қаралды 33 МЛН
Indian sharing by Secret Vlog #shorts
00:13
Secret Vlog
Рет қаралды 57 МЛН
New Gadgets! Bycycle 4.0 🚲 #shorts
00:14
BongBee Family
Рет қаралды 11 МЛН
flex-basis, flex-grow, flex-shrink. flexbox погружение
43:31
БЭМ методология. Практический пример
1:39:41
Ускоряем верстку | Гайд по препроцессору стилей | Sass (SCSS)
27:02
Александр Ламков — Friendly Frontend
Рет қаралды 15 М.
Стилизация checkbox и radio
31:30
От 0 до 1
Рет қаралды 23 М.