VS Code и без плагинов является одним из самых популярных редакторов для разработчиков: хорошая производительность, широкие возможности и гибкость для реализации всего, что нужно для работы. Сегодня записываю в свой рабочий блокнот заметки о плагине Live Sass Compiler, расширение, которое компилирует Sass или Scss в CSS в реальном времени с перезагрузкой браузера и его основных настройках, пути компиляции и Autoprefix.
Для Visual Studio Code, бесплатного редактора Microsoft с открытым исходным кодом, существует целый ряд расширений, помогающих программисту и веб разработчику в целом. Оформление редактора, обширная проверка синтаксиса или высокопроизводительные компиляторы Scss Sass кода в Css — они делают намного проще жизнь веб разработчика с VS Code Extensions.
Как скомпилировать файлы SCSS в CSS?
Самый простой способ скомпилировать Sass и SCSS в CSS, это воспользоваться простыми приложениями, например:
Как видно выбор есть и если у вас не работает scout-app, можно воспользоваться prepros или koala, но они также работают не у всех.
Если не хочется настраивать gulp sass, то в редакторе VS Code есть третий вариант решения, который вроде бы работает практически у всех — для этого нужно установить специальное расширения для нашего VS Code — Live Sass Compiller. Но проблема в том что после установки нам нужно его немного настроить.
Установить Live Sass Compiller расширение
Установить расширение Live Sass Compiller очень просто:
- В VS Code перейти в магазин расширений
- В окне поиска ввести Live Sass — По этому ключу он появится в поиске самый первый
- Кликнуть на кнопочку «Установить»
- Закройте вкладку установки и начинайте работать
Плагин Live Sass Compiller установился и в общем то работает. Снизу окна редактора появилась кнопка «Watch Sass» ну и в директории у вас так же есть папка с именем «Scss» или «Sass» с файлом style.scss или style.sass, (папка с файлом создаётся в ручную).
Начало работы с расширением Live Sass Compiller
Начать компилировать Scss Sass код в Css с этим расширение очень просто:
Кликнуть на «Watch Sass» и мы увидим как снизу откроется терминал который нам подсказывает какие файлы и куда компилируются. В этом терминале также будут выскакивать разные ошибки во время работы.
Важно! После клика на «Watch Sass» нужно обратить внимание, что в папке с именем «Scss» или «Sass» появляется новый файл style.css и файл style.css.map. Эти файлы появляются рядом с нашим файлом style.scss или style.sass. Но нам хотелось бы чтобы наш компилятор отправлял скомпилированные файлы именно в папку «css» или с любым другим вашим названием. Или просто в корень сайта, если вы например разрабатываете тему для WordPress.
Для этого нужно немного настроить VS Code, а именно расширение Live Sass Compiller.
Как настроить пути компилированного файла в Live Sass Compiller
Чтобы настроить плагин Live Sass Compiller, нам нужно перейти в настройки VS Code. Кто работает на Mac тогда это Code -> Параметры -> Параметры. В windows это Файл -> Настройки -> Параметры. Или просто сочетание клавиш Ctrl+,
В открывшемся меню с лева есть несколько вкладок и последние из них это «Расширения». Кликнув на эту вкладку нужно найти установленный плагин Live Sass Compiller. Если вдруг не видите этого плагина в списке плагинов, то просто перезагрузите VS Code, тогда он точно появится.
У каждого плагина есть файл с настройками, он, как правило, называется «settings.json» и у этого расширение такой файл тоже есть. Таких файлов будет несколько, под разную тематику. Нужно спуститься чуть пониже и найти тему связанную Settings: Formats и здесь есть кнопка «Изменить в settings.json».
Кликнув на «Изменить в settings.json» открывается новая вкладка с некоторыми параметрами где нужно изменить строчку «savePath». Удаляем null ставим кавычки и прописываем например такой путь «/assest/css/», если нет папки assest то просто укажите путь к папке /css. Сохраним и в общем это вся настройка.
Перезагружаем плагин, нажимаем «Watch Sass» и проверяем что в директории проекта «/assest/css/» появился файл style.css и служебный файл style.css.map на который не нужно обращать внимание. Но главное, что мы компилируем весь css код туда куда нам нужно.
Настроить Autoprefix в Live Sass Compiller
Autoprefix также настраивается быстро:
- Открываем параметры, Mac это Code -> Параметры -> Параметры. В windows это Файл -> Настройки -> Параметры. Или просто сочетание клавиш Ctrl+,
- В теме Settings: Autoprefix нажимаем на «Изменить в settings.json».
- Находим строчку «liveSassCompile.settings.autoprefix» и вставляем «> 1%«, «last 10 versions»
- Сохраняем файл и можно работать.
Так же настроить Live Sass Compiller можно, что бы он сразу компилировал сжатый код, в одну строчку без всяких пробелов и т.д. Это особо нужно для оптимизации сайта и скорости загрузки, когда проект готов и вы выгружаете его на сервер. Для этого просто поменяйте в строке «format» значение expanded на compressed.
Документацию с полными настройками Live Sass Compiller можно посмотреть на странице GitHub разработчика. На странице простым языком расписан массив форматов. Он позволяет сохранять в нескольких местах с настраиваемым форматом и расширением для каждой цели и задачи.
Ну что, настроить Live Sass Compiller, чтобы он компилировал Scss Sass кода в Css, оказалось не так уже и трудно. Просто нужно всё внимательно прочитать и поменять одно значение на другое. И да, не забывайте обращать внимание на то что подсказывает вам нижняя консоль. Если вы допустите какую – то ошибку, то меню вам обязательно подскажет, что у вас есть ошибка!