SASS SCSS компиляция в VS Code. Плагин Live Sass Compiler
Вставка
- Опубліковано 20 чер 2024
- Как собрать SASS/SCSS VS Code не выходя из редактора. Рассмотрим установку и подробную настройку плагина Live Sass Compiler. Сборка одного или нескольких SCSS файлов, компиляция в отдельную директорию, минификация CSS, отключаем лишние уведомления.
Код с настройками: webcademy.ru/blog/976/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 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 Завершение
Юрий, даст Бог, такое учительское разжевывание темы не приучит меня к пассивному восприятию новых фишек и не лишит радости самостоятельных открытий. Спасибо за урок и материалы к нему.
Для начинающего оказалось не очень просто. Пришлось два раза смотреть. Но итог того стоил. Спасибо.
Спасибо за детальный разбор полезного плагина для SASS/SCSS.
Ждем новых прямых эфиров и других полезных роликов!
Юра ,благодарю за ваши уроки,вы настоящий профессионал .
Юрий! даже не представляешь сколько я искал эту информацию, спасибо!
Спасибо вам, ваши курсы очень полезный для меня))
Спасибо Юрий, вы классно объясняете и подаёте материал)
Отличный контент по настройке плагина Live Sass для VS Code.
хороший урок про установку и настройку данного плагина и спасибо за такие понятные и простые объяснения Webcademy.
Спасибо за качественную подачу и полезный урок!
Коротко, без воды, и все только по делу. Краткость сестра таланта.😄
Отличное видео, все очень доступно. Такой формат, когда говоришь и показываешь результат своих действий - то, что надо!
Спасибо вам большое, пересмотрел множество видосов по установке sass, это самое лучшее! :)
Харош чел все разложил по полочкам, теперь я рил люблю Sass, кайфовый препроцессор
Наверно лучшее и подробнейшее объяснение по компиляции, что я смотрел. И все важные нюансы рассказали.Подписка и лайк
Спасибо за пример кода! Искал отключение map и добавление префиксов
очень хорошое объяснение, да и тема не оказалась такой сложной как думал. спасибо что делитесь таким полезным контентом
Благодарю, Юрий. Весьма полезно
Спасибо вам, очень подробно рассказали что и как и с чем едят, я долгое время писал в css из за того что не мог настроить scss compiler, но теперь прийдется изучать scss. Еще раз огромное спасибо.
Спасибо. Добрый человек Юрий)
супер видео. Без воды , все четко
Редко пишу коментарии, но Юрий, не прекращайте заниматься этим, чем вы занимаетесь!!! Все четко и по факту, очень круто когда есть такие люди!!!
просто супер! Очень простыми словами объяснили .
Спасибо большое 🤝 расскажите ещё 😮о других плагинах
Юрий, спасибо огромное!
Спасибо, очень полезная информация
Спасибо, одно из не многих видео, где все работает все как на видео без бубнов и танцев)
Спасибо, Юрий! Искал, как получить из scss сжатый css, нашёл здесь )
Огромное спасибо. Я уже пересмотрел кучу видео по данному вопросу. Это ЕДИНСТВЕННОЕ видео где без воды и лишнего трепа человек рассказал все абсолютно нормальным языком.
Лучшее видео, спасибо!
хороший урок, благодарю)
Спасибо,просто и понятно👍
спасибо тебе огромное , добрый человек
И ещё сделайте пожалуйста видео про семантику, чтобы не допускать семантические ошибки
Лайк не глядя💪
Замечательно. Сам тут недавно задумался как сбрасывать скомпиллированные файлы в отдельную папку., чтобы не было хаоса. Очень вовремя, только почему-то все равно в папке sass рядом с styles.sass при каждом ctrl-s появляется куча минов-мапов, хотя все также компиллируется и сохраняется и в созданную компиллятором папку css в обычный styles.css
Спасибо за помощь !!!
Годный материал.
спасибо большое, очень помогло видео
круто! то что надо))))))))))
scss css html layout compiler scss
cпасибо, очень помогло!)
Спасибо тебе большое!
кратко, по делу :)
спасибо, Маэстро
Посибо помог!
Super! От души...
Круто! Теперь часть курса по верстке с SCSS наверное стоит переделать. Коала точно теперь не нужна.
Koala никуда не пропала) Можно и через неё собирать. Можно через плагин, он удобнее тем что встроенный. Естественно на курсе будет по нему материал, и теперь его будем использовать.
Danke schön !
☺
Спасибо большое за полезные советы,
Ещё у меня есть вопрос сделайте пожалуйста видео когда нужна писать H1 H2 H3 H4 H5 H6 про это тему ❤
Приятный типок)
❤спасибо
Юрий, как всегда, огромная благодарность за труды.
Подскажите, пожалуйста, а можно ли в этом плагине настроить
А) твёрдую табуляцию
Б) присутствие/отсутствие пустых строк между стилями в конечном файле?
Сам я искал, в настройках расширения обычных не нашёл ничего подобного, но вдруг это можно сделать в settings.json, и вы знаете, как.
Спасибо
Спасибо.
Не, ну это уже эротика
Я бы сказала - высочайшая эротика, целю которой является жизнь в радости, наслаждениях, в эйфории от технологий для тврчества.
Светлая эротика возвышает чувства и прославляет силу технологий, при помощи которых, создают настоящие инженерные шедевры, дабы избавить землян от утомительного труда и открыть путь к радости и наслаждениям.
@@neleaonila2191 нифига вы завернули. надо стихи писать вам
Здраствуйте Юрий.У меня вопрос.
В каком случае нужно установить Sass глобально ,через терминал,то есть " npm sass -g "?
подскажите , так проблема, во втором проекте не хочет создавать файл css после нажатия на watch sass
Неделю бы назад этот ролик....
Он тогда и вышел, хд
В любом случае, чем он сейчас не кстати?
@@sistesolstice9646 я уже сам дошел
Здравствуйте! Как оказалось, этот плагин игнорирует все -webkit. Подскажите пожалуйста, можно ли это исправить?
скажите, а прямое подключение к scss файлы нельзя?
Скажите пожалуйста почему у меня файл с названием _catalog.scss все равно компилируется
почему у меня при нажатии watching Sass не появляются 2 файла min и map css
Можно название темы?
Что за тема в вс?
Что за тема для vscode?
Palenight ua-cam.com/video/CLZR2dn6a6c/v-deo.html
что делать если в savePath:"~/../css/" все время показывает ошибку
Укажите "savePath": "/css/"
Если удаленно по ssh работаешь то он очень криво работает.
по мне проще путь писать от корня проекта, чем ../../ высчитывать
Не всегда верстка может лежать в корне домена.
@@WebCademy а где?
@@mike-aaa Например site.com/project
@@WebCademy я говорил про настройки вскода
@Mike Andyl Точно, проще указать "savePath": "/css/"
.
Спасибо