Препроцессор SASS/SCSS за 38 минут. Что такое SASS, SCSS. Установка уроки обучение.
HTML-код
- Опубликовано: 5 июн 2024
- SASS/SCSS это препроцессор для CSS, он значительно расширяет возможности обычных таблиц стилей CSS и делает работу более удобной и быстрой. Установка SASS не требуется, нам просто нужна программка компилятор. В этом выпуске мы познакомимся с такими возможностями как переменные, вложенности, миксины, наследование и другими крутыми штуками. Поехали!
Видео по настройке компилятора SASS Prepros:
• Prepros что это. Как п...
Видео по настройке компилятора SASS VS Code:
• VS Code настройка уста...
Сайт препроцессора SASS sass-scss.ru/
Архив с файлами урока ищи в телеграм канале t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
Или качай по ссылке: fls.guru/files/tutorials/hell...
Содержание:
00:00 - Вступление
02:03 - Синтаксис
04:45 - Вложенность
16:35 - Переменные
18:36 - Импорт
22:41 - Шаблоны
29:44 - Миксины
32:41 - Математика
34:59 - Комментирование
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
ОЧЕНЬ ценю твой ЛАЙК и КОММЕНТ!
Поддержать канал: www.donationalerts.com/r/freelancerlifestyle
Стать Патроном: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
@@muroihenwald5080, пока и этого достаточно)
Женя, почему у меня style.scss, в siblime text 3 там всё серым шрифтом ничего не подсветчивается в отличии от css?
@@ZellKill значит нет плагина для sass, scss
@@FreelancerLifeStyle замудренно то как😄
Жэка привет когда пытаюсь подключить через @import scss файл, то вылазит ошибка и просит все перезагрузить. пишу в редакторе vscode. Можешь подсказать в чем может быть проблема?
Насколько ценны эти знания, которые прошли через миллионы проб и ошибок. И это не просто знания, а ОПЫТ. И Жека делится этим опытом. Это гораздо ценнее.
Спасибо! Рад что полезно!
Есть подозрение, что каждый ролик будет просмотрен и даже не один раз!
Супер! Я рад!
так и есть. Смотрю Жекины ролики не по одному разу)
как успехи за 5 месяцев?
@@ChendlerBiing такая же тема))
7 раз, чувствую что скоро 8-ой раз смотреть буду
Посмотрел я этот видос. Это просто огонь!!! Блин, такое чувство, что я уже лет 5 с SCSS плотно работаю. Жека, спасибо тебе! Так подавать информацию могут не многие. Это тот случай, когда посмотрел и уже умеешь. Что нужно будет дополнительного, почитать спецификацию по SCSS и все. Чувак, я иду по твоим видео по очереди и мне страшно (в хорошем смысле слова), что же ты будешь дальше нам рассказывать. Только не останавливайся! Уважуха тебе за твой труд и просвещение людей!
У тебя только такое чувство, сядешь верстать обосрёшься )) Одного просмотра видео не достаточно , как там успехи за год ? Сможешь хоть обычный лендинг сверстать ?)
Я всегда пользовался LESS а оказалось он ни чем не отличается от. SCSS. Надо дописать в резюме 😉
@@danilaundead4760 Какой ты душнила. Человек решил просто поблагодарить Женю за ролики, а ты начал что-то говорить про его способности в верстке, хотя его комментарий никак не был связан с этим
@@danilaundead4760 Чул, я свой первый лэндинг давно сверстал вообще посмотрев только хауди хо. А всем известно, кто он такой и какая там инфа (ну и результат был соответствующий). Если б посмотрел тогда ФПЖ, явно код был бы гораздо лучше. И сделал бы явно быстрее. Именно по роликам ФПЖ впервые верстать и просто, мне кажется. Если есть какое-то элементарное логическое мышление и минимальное знание английского.
@@danilaundead4760 Это точно!!!
Просмотрел 33 секунды и остановился, чтобы очередной раз поблагодарить. Азарт в глазах,явное искреннее желание помочь другим. Респект!
Спасибо!
Посмотрел весь ролик и остановился, чтобы попросить хоть кого-то объяснить мне, на**я вообще нужен scss!
@@xxxan_official Что бы быстрей писать код
@@kimitori379 да, я потом только понял, когда csstractor установил 😆 ну и немного разобрался в scss
Постоянные зрители уже тут)
с ходу лайк)
Спасибо!!! 🤘👍
тоже всегда так делаю =) видос еще не начался, а я уже леплю лайк на всякий, что бы не забыть=)
И вправду магия. Так верстка становится интересней. Спасибо за урок. Кстати, народ, кто щас видео смотри. Короче, чтобы ваш style.scss файл компилился в css/style.css, нужно в prepros нажать на style.scss и справа вы увидите путь к какому css, жмякаете на этот путь, и выбираете тот style.css, который нужен. Потому что той настройки, что у Жеки, нет. Походу, обнова. Желаю всем удачи в верстке!
Дай Бог тебе здоровья, прекрасный ты человек, Женя
Спасибо!
Сказал как будто батюшке какому-то. Хотя он похож))
Судя по твоему настроение в этом видео, тебе не терпится рассказать нам!) Спасибо за это))
Все верно, спасибо!
думаю так делают многие, но мне оч помогает запомнить система при которой я смотрю, потом ставлю ролик на паузу и тож самое повторяю. времени занимает намного больше, но хоть в голове остается.
а так sacc это пу-пу-пушка
Это да)
Я тоже так делаю. Если это новая информация, то подругому смысла нет делать
Этого урока мне хватит на неделю. Мне кажется вышка в институте была легче)))) Женя, спасибо!
55 дизлайков поставили авторы платных курсов
Хахах)))
Точно
Уже 72 , что-то много авторов ,которые разводят людей )
@Julia Vlasenko таки у меня так и получилось) год на фрилансе с питоном, сейчас на вëрстке в компании, хотя я в этой теме хлебушек)
93)
чуть мозг не взорвался))) от такого количества полезной инфы!)))👍👍👍
Спасибо за отличные уроки! Они не только очень информативные и понятные, но и вдохновляют на дальнейшее изучение вёрстки. Я учитель украинского языка, решил кардинально поменять сферу деятельности. Всегда думал, что мне, филологу, это не дано. Пока не попробовал. И Вы знаете - затянуло!
Мне 40 лет, но учёбой увлёкся, как школьник. И мне абсолютно всё равно, что думают окружающие об изучении вёрстки в моём возрасте. У меня есть цель, и я к ней иду. Ещё раз благодарю за Ваши уроки. Вы замечательный учитель. Удачи!
Похожая история. Конечно у нас все получится. Долго штурмовала сайты, библиотеки, но уже опускались руки, пока не нашла канал Жени. Сейчас полет нормальный, даже самоуважение выросло. Не такая я тупая, с таким шикарным преподавателем.
Верстаете за деньги уже?
@@lenaplay3884 и что работаете в этой сфере??или бросили учебу?
👍🏻Достойно уважения! Успехов!
Прошло 2 года и как успехи? Чтото получилось из себя сделать? А то мне тут 44 и я начал это все учить. Как думаете будет толк?
ДА!!!Препроцессор-это сила!Спасибо Женя за ваши объяснения,за ваши уроки,за всё что вы делаете для нас.
Это лучший учитель верстки рунета. Благодаря этому человеку найти работу верстальщиком станет не только очень просто, потому что все разложено по полочкам и максимально понятно, и ты учишься легко и быстро, но так же и очень сложно, потому что нас выучится 75 тыс. человек, и образуется конкурс 1000чел. на место )
Вау, очень интересный, многофункциональный и удобный этот предпроцессор. Спасибо что продолжаешь учить!
Пожалуйста!
Блииин, насколько это удобно тооо!!! Спасибо огромное за объяснение) Кстати, полностью согласен с ребятами из комментариев ниже: ты просто шикарный учитель, ты настолько хорошо объясняешь, что мне кажется даже человек, который не знает что такое компьютер поймет :)
Супер! Я очень рад!
Отлично объяснил! 👍 40 минут, без воды, только нужная информация, очень хорошая идея сразу показывать компиляцию, тем кто изучает думаю будет легче понять). Препроцессоры штука очень полезная и удобная если правильно использовать, сильно экономят время. Также думаю стоит тему правильного наименование немного затронуть и бем, будет как раз в тему).
Спасибо! Конечно БЭМ буду пробовать донести))
Спасибо за такой позитивный подход! Наш препод каждый раз нас пугает, что нас ждет очередная трудность, а в в твоем ролике это очередная крутая возможность. Очень меняет отношение к обучению. :)
Я рад!
Покупал курсы, одни страдания, а тут бесплатно все насколько просто и понятно, что слов нет. Спасибо огромное.
Поддерживаю.
Учусть на курсах фронта. Тему препроцессоров не понял от слова совсем. Посмотрел видос - проще простого. За что я плачу столько денег когда тут такой препод крутой все по полочкам раскладывает...
Доступно, понятно, просто, информативно и отдельный респект за грамотно построенную речь при объяснении как работает вся эта машина под названием SASS.
Не боги горшки обжигают.
Спасибо Уважаемый "Фрилансер по жизни"
Пожалуйста! Рад что полезно!
Я просто в шоке от качества контента на этом канале.Все настолько просто и понятно объясняется. Тебе надо создавать курсы по обучению на веб-разработчика. С такой подачей спрос будет огромный!
Спасибо! Это и есть курс, просто бесплатный)
ruclips.net/p/PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr
Жека, можно добавить еще одну - управление цветом.
Правда она очень редко используется, может ты поэтому и не упомянул о ней, но может кому-то пригодиться.))))
1/. Фунции lighten и darken
(Функция lighten осветляет исходный цвет, а функция darken затемняет его)
2/.Функции complement и invert
3/. Функция adjust-hue
4/. Функции saturate и desaturate
5/. Функции transparentize и fade-out
6/. Функции opacify и fade-in
7/. Функция grayscale
8/. Функция rgba
9/. Функция mix
10/. Функция adjust-color
11/. Функция scale-color
12/. Функции shade и tint
С помощью данных функций, имея в качестве входного значения всего один цвет, можно создать отличный дизайн в профессиональной цветовой палитре. И не прибегнуть ни к одному из графических инструментов.
Помимо использования рассмотренных выше цветовых функций каждой по отдельности, можно комбинировать их в одном выражении, создавая достаточно сложные конструкции.
Пример:
.lighten{
background-color: lighten(\$color,10%);
}
.darken{
background-color: darken(\$color,10%);
}
Ссылка на разъяснение: gearmobile.github.io/css/compass-color-functions/
Спасибо за ссылку! Крутые функции )
И как теперь коммент не потерять? 😄
1 раз офигел как глянул видео, второй раз как прочел этот комент.
@@o_antushevich Пожалуйста, удачи)
Это сильно, не знал этих.
Євген, дуже вам дякую за ці уроки. Ви дуже гарний викладач - все дуже зрозуміло і те, як поступово інформація ллється та вкладається в мозок - це просто неперевершено. Дякую, що ділитися своїм досвідом та допомагаєте початківцям. В такий скрутний час це просто неймовірно все.
Просто нет слов, отличная подача материала!!!! Ставим лайки!
Спасибо! Стараюсь!
Просто не уроки а ЧУДО! Спасибо Вам ОГРОМНОЕ!!!
Евгений, спасибо Вам огромное за ваши труды!Вы лучший.
Жека! Твоя подача информации лучшая на ютубе! Спасибо тебе за уроки!
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
я просто зобов'язана залишити комент. Це квінтесенція знань та досвіду. Величезне дякую за ці знання. Хочу до вас на курси.
раз лайк только один можно ставить, то я буду писать комменты!) видео супер, особенно часть про миксины. Все объяснили доступно. Спасибо вам за труд
Спасибо за великолепный урок!
Думаю, что ты круче Sass и всех препроцессоров, Я за пол часа больше понял, чем за несколько часов слушания других лекций. Жека, у тебя дар! Спасибо тебе!)
Пожалуйста!
Cпасибо!!!!!! Восхищаюсь доходчивостью подачи информации-обучения...
Жара пошла !!С каждым уроком все интереснее .Огромное спасибо!!!
Жека, спасибо тебе за твои труды. Не останавливайся. Подача материала у тебя супер!
Спасибо!
Здравствуйте, хотел выразить свою благодарность за ваши бесценные видео-уроки и передачу собственного опыта . Вы делаете большое дело для всех нас! Желаю всем ученикам дойти до конечной цели!
Спасибо большое!
Всегда вижу на этом канале грамотные и подробные объяснения. Спасибо!
Выучим, не так всё и сложно,спасибо большое за ценные знания
Огонь, спасибо за видео) Голова пухнет, но теперь все понятно, все записал себе)
Отлично!
Женя, спасибо тебе огромное! Замечательные уроки, как и учитель)
Спасибо!
Спасибо Сэнсей!!! Как подробно, без воды все объяснили! Лучший
Очень ценю ваш труд!!!! Уроки и правда КРУТЫЕ!!! Не бросайте вы лучший!!!
Огромное спасибо за видео! Отдельная благодарность за таймкоды, очень удобно пересматривать когда что-либо забываешь ;)
Пожалуйста!
Огромное спасибо, я благодарна за каждый урок, такой наставник любого заинтересует своим делом!
Пожалуйста! Я рад!
Евгений, очень доступно и понятно! Спасибо за уроки! Продолжайте, пожалуйста!
Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D
это ПРОСТО КРУТО!
Два лайка и два коммента от меня за один день - этого еще никогда не было.
Ну, спасибо! :)
Круче не видел. Без воды, всё конкретно и по существу, в хорошем темпе. Респект и спасибо!
Спасибо большое за твою работу! Подача информации , как и наполнение , просто прекрасные
Жень, спасибо огромное. Просто тонна полезной инфы у тебя на канале. Настроил по твоему видео vs code и все круто. Вообще с твоим каналом столько тем закрываю, флексы, гриды, изображения, сейчас препроцессор. Просто большое спасибо тебе.
Cпасибо друг, доступно и с харизмой, приятно слушать и легко запоминать!
Я рад!
ЭТО. БЫЛО. КРУТО.
Спасибо тебе большое за проделанную работу!
Пожалуйста!
Огромное спасибо за столь доступное и понятное обьяснение предмета! Как всегда лайк
подача материала супер! Спасибо огромное! ПРОЦВЕТАНИЯ
Ещё не видел такого блогера,который собирал столько позитива))))))
Спасибо!
Жень, красава. Подача оч доступная, хочется слушать. спасибо)
Супер! Я рад!
Спасибо Женя, отличный формат подачи материала!
Спасибо!
Спасибо сенсею за очередную порцию знаний ❤❤❤
Выучим,не так всё и сложно,спасибо большое за ценные знания))
Крутяк! Уверен, все получится!
Это ШШШЕДЕЕЕЕВРРР! Евгений, огромное спасибо!
Пожалуйста!
Дружище, респект! Очень доступно объясняешь, три тысячи раз благодарен!
Спасибо тебе за суперскую подачу информации : D Всем мирного неба над головой!
четко и красиво!
От души в душу
Спасибо! 👍
Да, после относительно простых частей про css сразу столько ВОЛШЕБНЫХ СИЛ надо осознать)) пошла жара!
Женя, спасибо!!
Пожалуйста!
А что тут волшебного? Обычный css, только пишется чуть по-другому. Ссылки в коде на код появились и калькулятор встроенный.
Шикарно! Искренне благодарен! Добра Вам, Евгений!
Преподаватель от Бога. Отличная подача материала. Спасибо!
Побольше таких бы преподавателей .
Спасибо!
Пожалуйста!
Очень крутая подача материалов! Жека, ты действительно один из лучших спецов, что рассказывают о верстке) Надеюсь, что благодаря твоим урокам из меня выйдет толк)
Спасибо! Стараюсь)
Спасибо, отличное видео. Все просто и понятно, без мычания. И речь чистая, приятно слушать)
Насколько мне нравятся эти уроки? Когда прозвучало предложение поставить лайк, я вспомнил, что не лайкнул предыдущее видео, потому вернулся к нему и исправился)))
спасибо большое! искренне желаю Вам успехов на канале!
Спасибо большое!
Женя, спасибо огромное! Очень полезные видео.
Пожалуйста!
Спасибо Жека за ценное видео. Редко можно встретить такой концентрированный материал.
Ну как же мне нравятся твои уроки! Ничего лучше не видел.
Евгений, большой респект. Очень мощно, продуктивно. СПАСИБО!!!! С наступающим Новым годом! Всех благ!)
Смотрю каждый день по ролику ) Вы самый лучший учитель !!!
Спасибо!
До твоего видео КУЧУ других посмотрел на тему SASS и ничего не понял. думал, что у меня с головой что-то не то или я просто бесталанный. Из твоего видео понял ВСЁ - зачем он нужен. какие у него преимущества и как он работает. Ты вернул мне мою самооценку. БЛАГОДАРЮ!!! Да, и ты просто ПРИРОЖДЁННЫЙ ГУРУ! Продолжай, пожалуйста! Удачи тебе и кучу донатов!
Wow! На сколько же это было полезно!!! Спасибо!
Как всегда на высоте🔥, благодарю за труды
Пожалуйста!
Добрый день, Спасибо за работу. Выполнено ВСЁ на "ОТЛИЧНО". Под "всё" понимаю реально ВСЁ. Это и подача учебного материала, и подготовленные материалы, и сценарии роликов, и сами видео, и ..... В русско-говорящей части интернета не встречал по данной тематике ничего сделанного лучше чем Ваши курсы. Спасибо большое еще раз.
Спасибо большое! Я рад!
Жека, благодарю за твой труд!!!
Доступное и понятное объяснение самого основного по препроцессору! Отлично, так держать! :-)
Я бы поставил тебе миллион лайков за твою работу, сейчас прохожу курс в GOIT (в польской версии) и если бы не твои уроки, я бы сдулся давно. Продолжай в том же духе! Всегда буду указывать твой канал в качестве источника знаний для людей, которые начинают изучать IT. Горжусь, что у меня есть такой земляк!💪💪 Слава Украине!
И что скажешь про эти курсы? Все устраивает?
@@user-qf9wc8ut2x шикарно, очень доступно объясняет. Нужно понять одно, пока не начнёшь писать и пробовать что-то менять в коде, ничего не выйдет. Сами по себе эти видео не помогут, если будешь только смотреть и ничего не делать. Для начинающих и зеленых в самый раз👍
Рекомендую к Жеке записаться на платный курс. Уроки у него хорошие, но нужно это все правильно систематизировать. Кроме того на одних уроках далеко не заедете. Нужно делать это самому
Да тебе бы книжки писать - так гладко ты стелешь! Хорошее объяснение. Очень качественный подход с структуре материала и сопровождающему его визуальному представлению и визуальным эффектам. Большое спасибо!
Пожалуйста! Я рад что полезно!
не знаю как выразить свою несказанную радость и благодарность! просто блин спасибо
Как всегда все на высоте! Спасибо!
как всегда все на высшем уровне! низкий поклон
Спасибо!
Спасибо огромное, за то, что ты делаешь!
Пожалуйста!
Огромное спасибо за бесплатные видеоуроки, объясняешь очень понятно, лайк)
Пожалуйста!
Дядька, ну просто шикарно! Я понял всё, что случается очень редко!
Спасибо тебе огромное, благодаря тебе я влюбился программирование! Ты лучший на ютубе по программированию!
Пожалуйста!
верстка это не программирование
какое программирование? если ты умеешь верстать, то уже программист?
Ну если это говорилось не про препроцессоры а реальный фроньэнд , react, js jQuery то тогда ладно
Уровень гораздо посерьёзнее, по ощущениям) В начале прям со скрипом информация заходила. Но благодаря ссылка на твои же уроки всё ясно, понемногу разобрался)
СУпер уроки, в очередной раз огромное спасибо!)
Євген, відео дуже корисне, я навіть уявити не міг скільки тут корисних функцій. Було б дуже класно побачити відео де Ти верстаєш простенький макет і показуєш на практиці де і як краще застосовувати можливості препроцесора. Ще раз спасибі за відео🙂
Женя, спасибо! Очередное понятное видео! Миллион очков тебе в карму!
Как же это круто)) спасибо за урок)
Спасибо! Рад что понравилось! 🤘
Круто дуже дякую зрозуміло розказуєш, приємно дивитися твої роліки. Дякую)))
Я радий!
отличное видео! информация подаётся очень доступно и дозировано)
с каждым уроком уровень повышается!