Скачать
SASS SCSS компиляция в VS Code. Плагин Live Sass Compiler
Автор: ВебКадеми | Юрий Ключевский
Загружено: 2023-04-04
Просмотров: 42401
Описание:
Как собрать SASS/SCSS VS Code не выходя из редактора. Рассмотрим установку и подробную настройку плагина Live Sass Compiler. Сборка одного или нескольких SCSS файлов, компиляция в отдельную директорию, минификация CSS, отключаем лишние уведомления.
Код с настройками: https://webcademy.ru/blog/976/
Материалы ВебКадеми на всех площадках: https://webcademy.ru/taplink/
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Мои авторские курсы:
💻 Профессия HTML верстальщик
Для начинающих. Курс по созданию и верстке сайтов.
👉 https://webcademy.ru/htmlstart/
💻 Курс "Frontend разработчик. JavaScript + React"
Станьте frontend разработчиком за 3 месяца.
👉 https://webcademy.ru/jscourse/
💻 Курс "Разработка сайтов на PHP + MySQL"
Сможете создавать сайты с любым функционалом.
👉 https://webcademy.ru/phpcourse/
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт ВебКадеми: https://webcademy.ru/
💈 Группа Вконтакте: https://vk.com/webcademy
💈 Telegram канал: https://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 Завершение
Развернуть
Доступные форматы для скачивания:
Похожие видео
array(10) {
[0]=>
object(stdClass)#6092 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "usfQHSN5nUQ"
["related_video_title"]=>
string(125) "Быстрый console.log() по горячим клавишам в VS Code. Вешаем сниппеты на хоткеи"
["posted_time"]=>
string(21) "2 года назад"
["channelName"]=>
string(50) "ВебКадеми | Юрий Ключевский"
}
[1]=>
object(stdClass)#6065 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "pBSch5AsJWs"
["related_video_title"]=>
string(101) "Ускоряем верстку | Гайд по препроцессору стилей | Sass (SCSS)"
["posted_time"]=>
string(19) "1 год назад"
["channelName"]=>
string(53) "Александр Ламков — Friendly Frontend"
}
[2]=>
object(stdClass)#6090 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "D_HW-tvyKKE"
["related_video_title"]=>
string(147) "Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, авто-префиксы"
["posted_time"]=>
string(19) "1 год назад"
["channelName"]=>
string(50) "ВебКадеми | Юрий Ключевский"
}
[3]=>
object(stdClass)#6097 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "nxCLXMBl4e4"
["related_video_title"]=>
string(150) "VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучение"
["posted_time"]=>
string(19) "5 лет назад"
["channelName"]=>
string(34) "Фрілансер по життю"
}
[4]=>
object(stdClass)#6076 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "vExgsxs9r-M"
["related_video_title"]=>
string(121) "CSS Grid - самая понятная инструкция с примерами по гридам (сеткам) в CSS"
["posted_time"]=>
string(21) "4 года назад"
["channelName"]=>
string(50) "ВебКадеми | Юрий Ключевский"
}
[5]=>
object(stdClass)#6094 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "Hh1aDoWMJXA"
["related_video_title"]=>
string(89) "Gulp 2024, полное руководство, современный синтаксис"
["posted_time"]=>
string(21) "2 года назад"
["channelName"]=>
string(13) "От 0 до 1"
}
[6]=>
object(stdClass)#6089 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "OIZAbldPBcI"
["related_video_title"]=>
string(42) "Долгожданный МИР. Или..."
["posted_time"]=>
string(23) "9 часов назад"
["channelName"]=>
string(27) "Анатолий Шарий"
}
[7]=>
object(stdClass)#6099 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "MpzTnr5x_Wg"
["related_video_title"]=>
string(94) "Препроцессоры SCSS/SASS. Все, что нужно знать для старта"
["posted_time"]=>
string(19) "6 лет назад"
["channelName"]=>
string(13) "От 0 до 1"
}
[8]=>
object(stdClass)#6075 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "-YAzSex8zIo"
["related_video_title"]=>
string(134) "Адаптивная верстка сайта с SCSS и JS. Объясняю по шагам. CSS Grid, БЭМ. Макет LoftHouse"
["posted_time"]=>
string(21) "2 года назад"
["channelName"]=>
string(50) "ВебКадеми | Юрий Ключевский"
}
[9]=>
object(stdClass)#6093 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "jLJU27MNdQs"
["related_video_title"]=>
string(108) "CSS Свойства Которые Поднимут Твою Верстку на Новый Уровень."
["posted_time"]=>
string(19) "1 год назад"
["channelName"]=>
string(35) "Быть Программистом"
}
}
Быстрый console.log() по горячим клавишам в VS Code. Вешаем сниппеты на хоткеи
Ускоряем верстку | Гайд по препроцессору стилей | Sass (SCSS)
Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, авто-префиксы
VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучение
CSS Grid - самая понятная инструкция с примерами по гридам (сеткам) в CSS
Gulp 2024, полное руководство, современный синтаксис
Долгожданный МИР. Или...
Препроцессоры SCSS/SASS. Все, что нужно знать для старта
Адаптивная верстка сайта с SCSS и JS. Объясняю по шагам. CSS Grid, БЭМ. Макет LoftHouse
CSS Свойства Которые Поднимут Твою Верстку на Новый Уровень.