Автоматическая компиляция SASS в CSS

Автоматическая компиляция SASS в CSS

Поначалу для компиляции sass-файлов в css я использовал сторонние программы, вроде Koala. Через какое-то время она стала жутко тормозить и грузить комп и чем больше отслеживаемых файлов, тем больше эти тормоза. После этого я попробовал поработать через Grunt, но там не очень удобно добавлять каталоги, да и когда их много для отслеживания, тоже возникает большая нагрузка.

В итоге я поменял сам подход к sass-компиляции. Вместо того, чтобы отслеживать сразу кучу каталогов и файлов, достаточно отслеживать только те, с которым идет работа прямо сейчас.

В Sass уже встроенна поддержка отслеживания файлов (watch), поэтому можно легко ей воспользоваться.

В каждый каталог шаблона размещается файл sass-watch.bat такого содержания:

start /min sass --debug-info --watch assets/sass/:assets/css/ --sourcemap=none --style compressed

Пути указываются относительно этого файла. В данном случае:

  • assets/sass/ — каталог, где находятся scss-файлы
  • assets/css/ — каталог, куда помещаются скопилированные css-файлы

Параметр --sourcemap=none указывает не создавать map-файл. Если он нужен вместо none можно указать auto.

Теперь, когда нужно включить компиляцию, достаточно запустить этот bat-файл, который запустит Sass в режиме watch. Консольное окно будет минимизировано, но в нём будет отображаться вся отладочная информация. После того, как работа завершена, окно можно закрыть.

Теперь пару слов о самих sass/scss-файлах. Если имя файла начинается с символа подчеркивания («_»), то такой файл не компилируется (но отслеживается!). Таким образом без символа подчеркивания нужно оставить только тот файл, который следует скомпилировать. Обычно это style.scss из которого получится style.css.

В процессе компиляции Sass создаёт служебный каталог .sass-cache. Он располагается на том же уровне, что и bat-файл. После окончания работ его можно спокойно удалить.

Комментариев: 5 RSS

1Николай06-09-2018 15:19

start /min sass 
--debug-info 
--watch assets/css/:assets/css/css/ 
--sourcemap=none 
--style expanded

Скопировал код, compressed заменил на expanded. Запустил и ничего не произошло.

У меня куча sass фалов которые лежат в разных пяти папках.

В папке assets/css/ лежат следующие папки:

\.sass-cache

\1-tools

\2-basics

и т.д. ещё три папки и один файл main.sass

Подскажите, что я сделал неправильно?

2MAX06-09-2018 18:12

Используйте для scss-файлов отдельный каталог (assets/sass). Сейчас у вас всё в куче.

3Николай06-09-2018 18:31

Переименовал папку assets/css/ в assets/sass/, на всякий случай создал папку assets/css/, хотя батник должен сам её сделать, внёс изменения в батник:

start /min sass 
--debug-info 
--watch assets/sass/:assets/css/ 
--sourcemap=none 
--style expanded

Запустил и ничего не изменилось.

4MAX06-09-2018 19:27

Параметры в одну строчку? Какое сообщение в консоли?

5Николай07-09-2018 11:03

Спасибо, всё получилось!

Ошибка, как правильно сказали, параметры не в строчку были, а в столбик.

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)