Тёмный

SASS SCSS компиляция в VS Code. Плагин Live Sass Compiler 

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 31 тыс.
50% 1

Как собрать SASS/SCSS VS Code не выходя из редактора. Рассмотрим установку и подробную настройку плагина Live Sass Compiler. Сборка одного или нескольких SCSS файлов, компиляция в отдельную директорию, минификация CSS, отключаем лишние уведомления.
Код с настройками: webcademy.ru/blog/976/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт курса: 27-го Мая 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 3-го Июня 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
ТАЙМ КОДЫ:
00:00 Введение
00:18 SCSS файл для компиляции
01:06 Плагин Live SASS Compiler
02:35 Файл .map
04:18 Импорт и _partials файлы
08:23 Уведомления. Отключаем output
12:14 Сохраняем CSS в отдельную директорию
15:36 Минифицированные файлы min.css
16:37 Настройки плагина. Исключение директорий
17:43 Завершение

Опубликовано:

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 81   
@fire-li8891
@fire-li8891 Месяц назад
Наверно лучшее и подробнейшее объяснение по компиляции, что я смотрел. И все важные нюансы рассказали.Подписка и лайк
@user-mm8be8hn2q
@user-mm8be8hn2q 3 дня назад
Для начинающего оказалось не очень просто. Пришлось два раза смотреть. Но итог того стоил. Спасибо.
@welldone9649
@welldone9649 Год назад
Спасибо за детальный разбор полезного плагина для SASS/SCSS. Ждем новых прямых эфиров и других полезных роликов!
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
Юра ,благодарю за ваши уроки,вы настоящий профессионал .
@user-zq1hy8tc9j
@user-zq1hy8tc9j 6 месяцев назад
Спасибо вам, ваши курсы очень полезный для меня))
@Max_Kolbin
@Max_Kolbin Год назад
Юрий! даже не представляешь сколько я искал эту информацию, спасибо!
@neleaonila2191
@neleaonila2191 Год назад
Юрий, даст Бог, такое учительское разжевывание темы не приучит меня к пассивному восприятию новых фишек и не лишит радости самостоятельных открытий. Спасибо за урок и материалы к нему.
@user-bt3hnjfd4e4q
@user-bt3hnjfd4e4q 8 дней назад
Спасибо за пример кода! Искал отключение map и добавление префиксов
@user-rw8wi3sq9e
@user-rw8wi3sq9e 10 месяцев назад
хороший урок про установку и настройку данного плагина и спасибо за такие понятные и простые объяснения Webcademy.
@redhat3541
@redhat3541 9 месяцев назад
Огромное спасибо. Я уже пересмотрел кучу видео по данному вопросу. Это ЕДИНСТВЕННОЕ видео где без воды и лишнего трепа человек рассказал все абсолютно нормальным языком.
@borbakborbakov5284
@borbakborbakov5284 6 месяцев назад
Коротко, без воды, и все только по делу. Краткость сестра таланта.😄
@ihopeingod1
@ihopeingod1 10 месяцев назад
Спасибо за качественную подачу и полезный урок!
@user-vj8hj9jk2b
@user-vj8hj9jk2b 11 месяцев назад
Отличный контент по настройке плагина Live Sass для VS Code.
@violator1911
@violator1911 3 месяца назад
Отличное видео, все очень доступно. Такой формат, когда говоришь и показываешь результат своих действий - то, что надо!
@user-eu2pw9so5p
@user-eu2pw9so5p 6 месяцев назад
Редко пишу коментарии, но Юрий, не прекращайте заниматься этим, чем вы занимаетесь!!! Все четко и по факту, очень круто когда есть такие люди!!!
@leyn1x416
@leyn1x416 6 месяцев назад
Спасибо Юрий, вы классно объясняете и подаёте материал)
@krabik2502
@krabik2502 Месяц назад
очень хорошое объяснение, да и тема не оказалась такой сложной как думал. спасибо что делитесь таким полезным контентом
@alanpuch2243
@alanpuch2243 9 месяцев назад
Благодарю, Юрий. Весьма полезно
@iNightDev
@iNightDev 6 месяцев назад
Харош чел все разложил по полочкам, теперь я рил люблю Sass, кайфовый препроцессор
@georgekondrashevsky3532
@georgekondrashevsky3532 4 месяца назад
Спасибо вам большое, пересмотрел множество видосов по установке sass, это самое лучшее! :)
@antonyeskimo7593
@antonyeskimo7593 11 месяцев назад
супер видео. Без воды , все четко
@user-vatican
@user-vatican 3 месяца назад
Спасибо вам, очень подробно рассказали что и как и с чем едят, я долгое время писал в css из за того что не мог настроить scss compiler, но теперь прийдется изучать scss. Еще раз огромное спасибо.
@thebest-dh7ud
@thebest-dh7ud 3 месяца назад
просто супер! Очень простыми словами объяснили .
@vit944
@vit944 2 месяца назад
Спасибо. Добрый человек Юрий)
@musicfan507
@musicfan507 Год назад
Спасибо большое 🤝 расскажите ещё 😮о других плагинах
@BryanskyM
@BryanskyM Год назад
Спасибо, очень полезная информация
@user-ev4vh8cm2x
@user-ev4vh8cm2x Год назад
Спасибо, одно из не многих видео, где все работает все как на видео без бубнов и танцев)
@Adaner1102
@Adaner1102 3 месяца назад
Спасибо, Юрий! Искал, как получить из scss сжатый css, нашёл здесь )
@victory2132
@victory2132 Год назад
Юрий, спасибо огромное!
@aisenyt
@aisenyt 7 месяцев назад
Лучшее видео, спасибо!
@aleksshyzovskiy
@aleksshyzovskiy Год назад
Юрий, как всегда, огромная благодарность за труды. Подскажите, пожалуйста, а можно ли в этом плагине настроить А) твёрдую табуляцию Б) присутствие/отсутствие пустых строк между стилями в конечном файле? Сам я искал, в настройках расширения обычных не нашёл ничего подобного, но вдруг это можно сделать в settings.json, и вы знаете, как.
@user-on4lv7lc9k
@user-on4lv7lc9k 6 месяцев назад
хороший урок, благодарю)
@crazyGamer-wn6tu
@crazyGamer-wn6tu Год назад
И ещё сделайте пожалуйста видео про семантику, чтобы не допускать семантические ошибки
@AntB2142
@AntB2142 8 месяцев назад
Спасибо,просто и понятно👍
@user-nl5jr7od4c
@user-nl5jr7od4c 6 месяцев назад
спасибо тебе огромное , добрый человек
@user-dh7dp1zc3n
@user-dh7dp1zc3n 5 месяцев назад
Лайк не глядя💪
@alexandrgusletsov2567
@alexandrgusletsov2567 10 месяцев назад
круто! то что надо)))))))))) scss css html layout compiler scss
@gamerjuliayu3247
@gamerjuliayu3247 День назад
cпасибо, очень помогло!)
@user-fm6wl8su6b
@user-fm6wl8su6b 5 месяцев назад
Годный материал.
@AlexNWRU
@AlexNWRU Год назад
Замечательно. Сам тут недавно задумался как сбрасывать скомпиллированные файлы в отдельную папку., чтобы не было хаоса. Очень вовремя, только почему-то все равно в папке sass рядом с styles.sass при каждом ctrl-s появляется куча минов-мапов, хотя все также компиллируется и сохраняется и в созданную компиллятором папку css в обычный styles.css
@user-jd3se8gc6k
@user-jd3se8gc6k 6 месяцев назад
спасибо большое, очень помогло видео
@crazyGamer-wn6tu
@crazyGamer-wn6tu Год назад
Спасибо большое за полезные советы, Ещё у меня есть вопрос сделайте пожалуйста видео когда нужна писать H1 H2 H3 H4 H5 H6 про это тему ❤
@motor4718
@motor4718 4 месяца назад
Спасибо тебе большое!
@eb2425
@eb2425 11 месяцев назад
Спасибо за помощь !!!
@D15ND
@D15ND 11 месяцев назад
кратко, по делу :)
@user-jq4fl3pg8r
@user-jq4fl3pg8r 5 месяцев назад
спасибо, Маэстро
@Bleblei1992
@Bleblei1992 9 месяцев назад
Посибо помог!
@denisgoida4970
@denisgoida4970 5 месяцев назад
Super! От души...
@arkadii8528
@arkadii8528 2 месяца назад
Danke schön ! ☺
@stepantretyakov
@stepantretyakov Год назад
Круто! Теперь часть курса по верстке с SCSS наверное стоит переделать. Коала точно теперь не нужна.
@WebCademy
@WebCademy Год назад
Koala никуда не пропала) Можно и через неё собирать. Можно через плагин, он удобнее тем что встроенный. Естественно на курсе будет по нему материал, и теперь его будем использовать.
@biscvie
@biscvie 2 месяца назад
Спасибо
@user-vv7ic5pr9d
@user-vv7ic5pr9d Год назад
❤спасибо
@re_freyd
@re_freyd Год назад
Приятный типок)
@MariZlnva
@MariZlnva 8 месяцев назад
Спасибо.
@vaspurakavdalian1133
@vaspurakavdalian1133 4 месяца назад
Здраствуйте Юрий.У меня вопрос. В каком случае нужно установить Sass глобально ,через терминал,то есть " npm sass -g "?
@whtdoumean0_o
@whtdoumean0_o 9 месяцев назад
Здравствуйте! Как оказалось, этот плагин игнорирует все -webkit. Подскажите пожалуйста, можно ли это исправить?
@Egor_Bilonog
@Egor_Bilonog Месяц назад
почему у меня при нажатии watching Sass не появляются 2 файла min и map css
@user-ke4cy3cl2s
@user-ke4cy3cl2s 4 месяца назад
скажите, а прямое подключение к scss файлы нельзя?
@nimarchik
@nimarchik 3 месяца назад
Скажите пожалуйста почему у меня файл с названием _catalog.scss все равно компилируется
@kf_saidamir
@kf_saidamir 5 месяцев назад
Можно название темы?
@CheckTime
@CheckTime Год назад
Не, ну это уже эротика
@neleaonila2191
@neleaonila2191 Год назад
Я бы сказала - высочайшая эротика, целю которой является жизнь в радости, наслаждениях, в эйфории от технологий для тврчества. Светлая эротика возвышает чувства и прославляет силу технологий, при помощи которых, создают настоящие инженерные шедевры, дабы избавить землян от утомительного труда и открыть путь к радости и наслаждениям.
@qstoneqstonovich7636
@qstoneqstonovich7636 10 месяцев назад
@@neleaonila2191 нифига вы завернули. надо стихи писать вам
@user-sv3oy3cf8q
@user-sv3oy3cf8q 6 месяцев назад
Что за тема в вс?
@mike-aaa
@mike-aaa Год назад
Неделю бы назад этот ролик....
@sistesolstice9646
@sistesolstice9646 Год назад
Он тогда и вышел, хд В любом случае, чем он сейчас не кстати?
@mike-aaa
@mike-aaa Год назад
@@sistesolstice9646 я уже сам дошел
@aidragnil8244
@aidragnil8244 Год назад
что делать если в savePath:"~/../css/" все время показывает ошибку
@WebCademy
@WebCademy Год назад
Укажите "savePath": "/css/"
@timurshorahanov7871
@timurshorahanov7871 Год назад
Что за тема для vscode?
@WebCademy
@WebCademy Год назад
Palenight ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CLZR2dn6a6c.html
@xamand3226
@xamand3226 9 месяцев назад
Если удаленно по ssh работаешь то он очень криво работает.
@mike-aaa
@mike-aaa Год назад
по мне проще путь писать от корня проекта, чем ../../ высчитывать
@WebCademy
@WebCademy Год назад
Не всегда верстка может лежать в корне домена.
@mike-aaa
@mike-aaa Год назад
@@WebCademy а где?
@WebCademy
@WebCademy Год назад
@@mike-aaa Например site.com/project
@mike-aaa
@mike-aaa Год назад
@@WebCademy я говорил про настройки вскода
@WebCademy
@WebCademy Год назад
@Mike Andyl Точно, проще указать "savePath": "/css/"
@ans6552
@ans6552 6 месяцев назад
.
@vadimw7785
@vadimw7785 5 месяцев назад
Спасибо
Далее
I Built 4 SECRET Rooms In ONE COLOR!
29:04
Просмотров 3 млн
can you repeat it? #tatyanadiablo ##shorts
00:11
Просмотров 1 млн
iPhone or Android?😂📱🔥@milanaroller
00:13
Просмотров 2,4 млн