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

Поделиться
HTML-код
  • Опубликовано: 19 янв 2025

Комментарии • 203

  • @tuRistst
    @tuRistst 5 лет назад +44

    Почему я раньше не находил тебя? Эти уроки просто настоящая жила для всех моих пробелах в верстке! Спс!

    • @vadymprokopchuk
      @vadymprokopchuk  5 лет назад +3

      спасибо

    • @AXAMALANS
      @AXAMALANS 3 года назад +3

      согласен, замечательная работа, все ясно

  • @homaas7150
    @homaas7150 2 года назад +15

    За 30 минут всё что нужно для практики, ничего лишнего. Спасибо:)

  • @aleksandrglushchenko506
    @aleksandrglushchenko506 4 года назад +12

    Дружище не бросай коучинг, у тебя дар, объясняешь быстро понятно и очень круто. Спасибо

  • @alexdivola
    @alexdivola 5 лет назад +7

    До этого видоса думал что препроцессоры это что-то сверхсложное и нужно минимум неделю изучать. Спасибо за введение в эту технологию) Следующий макет начну верстать уже на SCSS.

  • @timi1255
    @timi1255 2 года назад +5

    Лучший учитель которого я только встречал 👍

  • @sercherr
    @sercherr 5 лет назад +2

    После одного просмотра этого видео сразу начал использовать scss в работе, до этого думал, что это какая-то сложная технология и до последнего обходил стороной, спасибо!

  • @alexkodding9354
    @alexkodding9354 3 года назад +18

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

    • @danilaundead4760
      @danilaundead4760 3 года назад

      Ты пол года учишь вёрстку ?) Ты учишься 1 раз в неделю пару часов? Или как?

    • @alexkodding9354
      @alexkodding9354 3 года назад +12

      @@danilaundead4760 если у тебя получилось быстрее я только рад за тебя друг)

    • @T2kibi
      @T2kibi 2 года назад +1

      @@alexkodding9354привет, как успехи по учебе ?)

    • @alexkodding9354
      @alexkodding9354 2 года назад

      @@T2kibi норм, а что?

    • @T2kibi
      @T2kibi 2 года назад +1

      @@alexkodding9354 ничего )
      Сам только начал учится, интересно узнать как другие ребята учились )

  • @ЛидияПаринова-п1т
    @ЛидияПаринова-п1т 4 года назад +4

    Спасибо за урок. Оказалось всё не так сложно. Наконец-то поняла разницу между scss и sass. Творческих успехов и процветания!

  • @МаксимКрутов-е8б
    @МаксимКрутов-е8б 4 года назад +1

    Много новых и полезных нюансов узнал о препроцессорах! Благодарю Вас, очень доходчиво и талантливо доносите информацию, она быстро впитывается и запоминается.

  • @Aurum26ENR
    @Aurum26ENR 3 года назад +8

    Добавлю немного для новичков. Для того, чтобы вы могли писать на scss, а компилировался файл в css через программу Коала, саму программу Коала закрывать не следует, в момент компиляции она должна быть открыта и видна на панели задач!

  • @maksworldwebboy1119
    @maksworldwebboy1119 Год назад

    Урок просто зачьот 👍, буду рекомендувати це відео тим хто хоче перейти на scss.Автору великий респект

  • @sanzharabdurahmanov6988
    @sanzharabdurahmanov6988 3 года назад +3

    Под этим видео должно быть минимум 🍋 просмотров, лайков и подписок! Что за аномалия такая? Благодарю тебя баратец за такой годный контент. Успехов больших, продолжай в том же духе. Лайк, подписка, колокольчик обеспечены, 💯!

    • @ИловМакс
      @ИловМакс 3 года назад

      Столько верстальщиков во всем мире не наберется

    • @ИловМакс
      @ИловМакс 3 года назад

      @@sanzharabdurahmanov6988 никогда не сомневайся)

  • @ВладЛитвин-с6д
    @ВладЛитвин-с6д 3 года назад +2

    спасибо тебе огромное, самое понятное руководство по scss которое я только смог найти!

  • @ProfessoRGM
    @ProfessoRGM 5 лет назад +26

    Видео - огонь! Огромное спасибо! Вы очень круто объясняете.

  • @ЕвгенийТодоров-с7л
    @ЕвгенийТодоров-с7л 3 года назад +1

    Просто лучший!!! Подача пушка! Не бросай канал только, у тебя дар объяснятся нормально!

  • @enterkvas
    @enterkvas 4 года назад +1

    Огромное спасибо! Почерпнул много полезного. Как говорится: "Век живи, век учись". Успехов!

  • @logizm9431
    @logizm9431 2 года назад +1

    Единственный кто нормально объяснмл SASS SCSS

  • @OleksandrPohribnyi
    @OleksandrPohribnyi 5 лет назад +4

    Если честно, то ты лучший на RUclips в плане обучения для меня, по сравнению с webdesign master прям все четко и по полочкам.
    Я пытался научиться по его видео и просто ничего не понимал, а после твоих видео на одном дыхании за час)

    • @dvsDesing
      @dvsDesing 4 года назад

      Тоже, пробовал по его работам делать и просто погрузал и стопорился:( а вот Вадим вернул веру в свои силы))

    • @СергейКудаев-в6ц
      @СергейКудаев-в6ц 4 года назад

      Не рекламы ради: есть еще один толковейший гуру: ruclips.net/user/freelancerlifestyle Женя Андриканич
      Тоже очень понятно излагает. Смотрю только его и автора этого замечательного канала - Вадима Прокопчука.

  • @cy66a
    @cy66a Год назад +2

    Спасибо за видео! Я для перевода SASS(SCSS) в CSS использую не приложение, как в видео, а расширение для VSCode, которое называется Live Sass Compiler. Это удобно для небольших проектов или обучения. А для чего-то побольше уже лучше использовать тот же GULP. Всем успехов!

  • @Наталья-с8з4ц
    @Наталья-с8з4ц 4 года назад +4

    Вадим, молодец, очень понятно все объясняешь!!! Спасибо))

  • @happymax9059
    @happymax9059 5 лет назад +3

    Спасибо! Очень нравится то, что ты грамотно и доступно объясняешь материал. Успехов тебе!)

    • @vadymprokopchuk
      @vadymprokopchuk  5 лет назад

      спасибо

    • @kiunsama1881
      @kiunsama1881 4 года назад

      сж вы ҽввҽвҽажаҽаҽкҩкхкӡккдкзкдкзкжзазк

    • @kiunsama1881
      @kiunsama1881 4 года назад

      @@vadymprokopchuk зцжвжаҩпҩжа!ажсжсжвжад

    • @kiunsama1881
      @kiunsama1881 4 года назад

      пбпивычрв ҩстҽчс сЧыи

    • @kiunsama1881
      @kiunsama1881 4 года назад

      клӡуудкзкдкӡкдкӡедпӡпд

  • @MrSantafe1100
    @MrSantafe1100 3 года назад

    до твоего видео не понимал зачем вообще препроцы. спасибо тебе!!!

  • @DreamersStoriesForYou
    @DreamersStoriesForYou 5 лет назад +9

    Спасибо за видео, Scss это тема вообще, как раз попробовал уже не представляю верстку без него, не знал что в rgba можно решетку ставить)) Я вот только начал путь в it компании и могу посоветовать снять видео с стандартными ошибками и недочетами новичков, например лишние области, баги распространенные, неправильные реализации слайдера,попапа и тд, можно взять верстку какого то новичка и разобрать, думаю полезно будет, ибо токо на работе узнал про кучу ошибок, о которых и не знал вообще, ибо нигде не видел что бы кто то показал что у li-шек даже после обнуления отступов например есть 3 px примерно расстояние между собой и тд. Таких моментов куча и нигде не освящаются они в обучениях. В слайдере например многие когда нужно сделать на весь экран картинку которая меняется со слайдом кидают ее на bg, хотя это усложняет со стороны клиента замену картинки и тд. Вообщем удачи в развитии канала, очень хороший контент)

    • @vadymprokopchuk
      @vadymprokopchuk  5 лет назад

      Спасибо за ценные советы, рад, что открыл инфу про # в rgba

    • @sergei-sabitov
      @sergei-sabitov 5 лет назад

      у этого чувака плейлист Repozitorro ruclips.net/channel/UCE9ODjNIkOHrnSdkYWLfYhg

  • @eduardgrigoryan6052
    @eduardgrigoryan6052 3 года назад

    Спасибо большое. По сути от вас я учусь больше чем я учился на курсах ...

  • @waker_drums
    @waker_drums 5 лет назад +1

    Как всегда доходчиво и кратко !
    Единственный кому хочется оставить комментарий для поддержки !)

  • @ericraudy
    @ericraudy 5 лет назад +3

    Очень понятное и толковое объяснение. Благодарю! Еще бы шрифт покрупнее сделать в IDE, а то даже в полноэкранном режиме на 1080 плоховато видно. А так всё круто! Требую продолжения банкета!))))

  • @МарияПлотникова-ъ7щ
    @МарияПлотникова-ъ7щ 4 года назад +1

    Это просто подарок какой-то! Спасибо вам!!!

  • @vadonfit9269
    @vadonfit9269 2 года назад

    офигенный урок, вспомнил препроцессоры за 30 мин, реально за 30 ))

  • @ertargn
    @ertargn 5 лет назад +6

    автору спасибо.. продолжай в том же духе. все понятно объяснил. определенно стоит подписки

  • @ДенисКазимирский-э2и
    @ДенисКазимирский-э2и 4 года назад +1

    Лайк на первых минутах. Спасибо за чёткую подачу инфы!) Продолжай делать такой же крутой контент, тебе воздастся за хорошие поступки такие))

  • @otabektoshturdiyev356
    @otabektoshturdiyev356 3 года назад

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

  • @weslleytroy4727
    @weslleytroy4727 4 года назад

    Посмотрел это видео, и сразу нажал подписаться! Коротко , доступно и по делу! Спасибо!

  • @aigerimseitova5399
    @aigerimseitova5399 3 года назад +2

    Здравствуйте! крутые уроки, спасибо вам огромное. Но, хотелось бы на этом уроке про миксины тоже узнать

  • @konstantinreut2577
    @konstantinreut2577 3 года назад +1

    It was very useful! Thank you, Vadim!

  • @dinargabitov3572
    @dinargabitov3572 3 года назад

    Спасибо за видео. Показываешь куда и как, неплохо объясняете (без обид. из за чего субтитры коряво перевели). А так все ок. До этого думал, что сложный и запутался (по началу, да), т.к. я старый поколение)) но все понятно. Вы демонстрируете пишете код, а я вас повторяю. Пока не могу решить, что выбрать sass или scss. Я бы предпочел выбрать scss, т.к. привык писать код со скобками и точка запятая. В общем поставлю оценку 10/10, в том числе лайк ;)

  • @den3212
    @den3212 3 года назад +18

    Таймкоды для урока:
    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 2 года назад +1

      Это сообщение надо прикрепить.

    • @_SOMEONE_
      @_SOMEONE_ Год назад

      Спасибо

  • @skywalker2090
    @skywalker2090 5 лет назад +1

    Просто супер, все понятно и доступно объяснил. Особенно позабавил холор, теперь мы знаем что было бы если css создавали украинцы))

  • @ГаляКиричук-в1ю
    @ГаляКиричук-в1ю 2 года назад

    Благодарю за такое крутое объяснение, все ясно/понятно!!!)

  • @aleksius7819
    @aleksius7819 4 года назад +1

    Хорошо и доходчиво рассказал, спасибо за твой труд.

  • @_bond_1013
    @_bond_1013 5 лет назад +2

    Круто, спасибо, раньше даже не знал зачем они нужны)

  • @BlockElement
    @BlockElement 3 года назад

    мне кажется, что ты лучший

  • @juliaavona2906
    @juliaavona2906 Год назад

    спасибо! Это видео упростило мою жизнь)

  • @bipolarcw
    @bipolarcw 3 года назад +1

    спасибо! все понятно разложил по полочкам

  • @VENOM-rl5eo
    @VENOM-rl5eo 2 года назад +1

    Вот бы мне таких учителей в школе)

  • @stanislavahrafenin424
    @stanislavahrafenin424 5 лет назад +2

    С чувством и расстановкой) Спасибо!

  • @romanmed9035
    @romanmed9035 4 года назад

    вот сначала я посмотрел ролик 2020 года, а теперь 2019 и впечатление неопределенное. обычно вначале все плохо, а потом уже привыкается и вырабатывается навык. тут как-то кажется наоборот. елси бы не даты под видео, я сказал бы что это вышло позже, чем предыдущее. конечно не мне учить видео снимать. я и такое не сделаю. но предлагаю автору самому посмотреть и сравнить и на основании увиденного сделать вывод и принять решение. какое оно будет это конечно уже дело самого автора. но от себя повторюсь, что текущее понравилось в несколько раз больше более нового. даже больше. это вообще очень понравилось своим изложением и подходом к делу. не хуже тех у кого миллионы просмотров и отметок.

  • @Geimer6841
    @Geimer6841 4 года назад

    Спасибо за видео, быстро и чётко объяснил

  • @ЕвгенийБаркас
    @ЕвгенийБаркас 4 года назад

    Подписка, лайк однозначно. Очень доходчивая подача материала.

  • @Serhii_P.
    @Serhii_P. 6 месяцев назад

    Спасибо. Четко объяснили

  • @jizikjizik71
    @jizikjizik71 4 года назад

    Спасибо за видео, пойду верстать уже через SCSS

  • @AggeJl0c44
    @AggeJl0c44 3 года назад +2

    Огромное вам спасибо 🤗
    Всё понятно, всё чётко 👏🏻👏🏻❤️

  • @sanjarabakirov7116
    @sanjarabakirov7116 3 года назад

    Отличное обучающее видео! Респектую!

  • @nika_lletka
    @nika_lletka 5 лет назад

    Круто! Очень классно все объяснил, смотрела не отрываясь. Удачи в успехах, с меня лайк и подписка х)

  • @viktoriakrasiuk2000
    @viktoriakrasiuk2000 4 года назад

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

  • @ЛимонныйШтрудель
    @ЛимонныйШтрудель 2 года назад

    огромное спасибо за урок! многое стало понятным)

  • @ДмитрийКотт-ф1м
    @ДмитрийКотт-ф1м Год назад

    Выражаю благодарность из сентября 2023 года!

  • @justspartak
    @justspartak 5 лет назад

    Cпасибо! Хорошее руководство для начинающих.

    • @kiunsama1881
      @kiunsama1881 4 года назад

      рзизижуҟаҽҽаҽажпжппжжжмзвзфхц ҩвжаабпдпд

    • @kiunsama1881
      @kiunsama1881 4 года назад

      брпжпҩпзмҩмдсдраспкпжыыфжџч бы

    • @justspartak
      @justspartak 4 года назад

      @@kiunsama1881 наркоман?

  • @НиколайКоломиец-с6н

    дякую за відео,доступно,корисно,продовжуй.!

  • @M27B_our_victory
    @M27B_our_victory 3 года назад

    Thank you bro!) You are the best, man!)

  • @vikogr200
    @vikogr200 4 года назад

    Большое спасибо. Очень доходчиво.

  • @blacksmith5117
    @blacksmith5117 3 года назад

    Отличный урок, спасибо

  • @Gazon1155
    @Gazon1155 3 года назад +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 :)

  • @ckolobok57
    @ckolobok57 2 года назад

    Полезное видео, спасибо тебе.

  • @candy_front
    @candy_front 11 месяцев назад

    Лучший учитель

  • @543769bobo
    @543769bobo 4 года назад

    Посмотрел и Gulp, отличная работа, Подписался!

  • @PhiLiN58
    @PhiLiN58 4 года назад

    Как всегда ТОП ✌️😎

  • @Infinity-zf8ms
    @Infinity-zf8ms 3 года назад

    Огромное спасибо за это видео)

  • @bergghest
    @bergghest 9 месяцев назад

    Как всегда топ

  • @yarovyy_max
    @yarovyy_max 4 года назад

    Супер урок. Спасибо

  • @HearonPlay
    @HearonPlay 4 года назад

    Спасибо за твой контент! Помог

  • @макогонденис
    @макогонденис 2 года назад +1

    Ти очень Крут🤛

  • @qetosf
    @qetosf 3 года назад

    Спасибо за урок!

  • @ИванМиронов-з4б
    @ИванМиронов-з4б 4 года назад

    круто, как и всегда

  • @IT_psychopath
    @IT_psychopath 4 года назад +1

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

  • @KIMI-lz5ym
    @KIMI-lz5ym 4 года назад

    Классно. Спасибо большое!

  • @samiroutka
    @samiroutka Год назад

    Спасибо большое, помог

  • @rec5131
    @rec5131 4 года назад +1

    Круто. Все Sassно 👍

  • @Ruslan_Emurlaev
    @Ruslan_Emurlaev 4 года назад

    Хорошее видео! Спасибо!

  • @dmitrijponkin
    @dmitrijponkin 5 лет назад

    Спасибо! Очень круто :)

  • @ВалянцінКуракевіч
    @ВалянцінКуракевіч 3 года назад +1

    дзякуй!

  • @ИгорьБ-ц4х
    @ИгорьБ-ц4х 4 года назад

    Привет - подскажи - почему у вложеных получаются отступы?

  • @_pheax
    @_pheax 4 года назад

    спасибо, классно обьясняете

  • @jek126
    @jek126 4 года назад

    Спасибо большое вам !

  • @alexperemey6046
    @alexperemey6046 Год назад

    А ещё когда копипастишь с figma стили sass не очень себя показывает )

  • @igormajrov8444
    @igormajrov8444 2 года назад

    Чем Koala отличается от Prepros? Какие у нее преимущества?

  • @fures4975
    @fures4975 3 года назад

    Вадим а файлы .scss на хостинг нудно заливать?

  • @volodymyrhetsko5962
    @volodymyrhetsko5962 5 лет назад +5

    Привет. Можешь сделать урок по Bootstrap 4, аналогичный твоему видео по bootstrap 3?

    • @vadymprokopchuk
      @vadymprokopchuk  5 лет назад +3

      Привет, обязательно запишу, но немного попозже

    • @Mamikonars
      @Mamikonars 5 лет назад

      ждем

  • @elenaga4585
    @elenaga4585 4 года назад

    Максимальный бал ! и лайк

  • @ТамараШомина-ч4щ
    @ТамараШомина-ч4щ 5 лет назад

    спасибо, Вадим

  • @НадеждаКравцова-щ5й

    Скажите пожалуйста, как реализуется возможность вложенности, если используется БЭМ? ведь тогда нет вложенности

  • @brodyagaPATY
    @brodyagaPATY 5 лет назад

    Для sass же есть в VSCode препрос.... мне кажется удобней

  • @holyymollyy
    @holyymollyy Год назад

    Здравствуйте! Только начинаю разбираться в этом всем. Подскажите, пожалуйста, информация актуальна на 2023 год? Как я поняла, в программировании постоянно что-то меняется. Спасибо больше заранее!

  • @euStiuMaiBine
    @euStiuMaiBine 4 года назад

    Great work!

  • @ЛеонидПятибратов-э7ц

    Спасибо, информативно.

  • @_Kawaii_Senko_
    @_Kawaii_Senko_ 3 года назад

    Спасибо большое)

  • @dimafomaa
    @dimafomaa 2 года назад

    Подскажите как отключить всплывающее окно внизу про ошибку которая выдает koala?
    Стоит автосохранение в vscode и если не дописал код сразу ошибка и потом все нормально
    Как отключить ?

    • @vadymprokopchuk
      @vadymprokopchuk  2 года назад

      я точно не помню, но вроде там в настройках есть пункт

  • @BAS-64
    @BAS-64 5 лет назад

    Огромное спасибо.

  • @mbreti362
    @mbreti362 4 года назад

    Мне бы для начала научиться к верстке:(

  • @uultayarstankulova6132
    @uultayarstankulova6132 Год назад

    спасибо большое

  • @mouri_san
    @mouri_san 5 месяцев назад

    круто, спасибо