Мы продолжаем. В этой статье я хочу рассказать о плагине, "Live Sass Compiler", для Visual Studio Code, который поможет вам произвести компиляцию ваших sass/scss файлов в проекте.
1 шаг
Заходим в маркетплейс (о детальной установке плагинов, можно прочитать здесь), вводим название "Live Sass Compiler", как показано на рисунке, жмём кнопку Install.
Live Sass Compiler
2 шаг
Открываем наш проект, создаем папку. Я её назвал sass.
Выделяем папку курсором, нажимаем на создание файла с расширением scss('ваше имя файла.scss'), можно также создать с другим расширением
('ваше имя файла.sass'), это зависит, от синтаксиса на котором вам удобно писать код для стилей. Ссылочка на документацию по SASS/SCSS.
Мы готовы к написанию кода. Напишем стили для тега body, для теста.
Как показано на рисунке, после установки плагина, внизу окна программы, появилась кнопка Watch Sass. Нажимаем её.
Ну вот наш файл скомпилирован.
Теперь в реальном времени, наш плагин будет следить за изменениями в стилях и сразу же их компилировать в ccs расширение. Чтобы, остановить компиляцию файла нужно нажать Watching.
3 шаг
Теперь перейдём к настройкам плагина.
Вам, скорей всего, не хотелось бы, чтоб ваши скомпилированные файлы попали в папку sass и лежали вместе с файлами .sass. Например, они бы были в папке css. Открываем настройки программы
Нажимаем setting
Выбираем Extensions и нажимаем Edit in settings.json
Отрывается файл с настройками, вставляем вот такой код в конец файла
- Формат сжатие вашего файла со стилем, их три режима:
"format": "nested" , "format": "compressed", "format": "expanded"; - Имя вашего файла со стилями после компиляции;
- Путь куда будет скомпилированный ваш файл sass;
Теперь можно использовать, два плагина вместе, и не нужно обновлять страницу в ручную(" Live Server ", " Live Sass Compiler "). Добавим наш плагин в список плагинов.
Резюме📖
Ссылка для скачивание программы https://code.visualstudio.com/
Список плагинов которые мы установили
Russian Language Pack for Visual Studio Code
Auto Rename Tag
Live Server
Live Sass Compiler
Ссылка на первую часть статьи здесь.
Дальше больше. Ищите статьи по VS Code по хештегу телеграм-канале #vscode
Спасибо.