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

13-06-2017Время чтения ~ 2 мин.CSS, HTML, LESS, SASS 24024

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

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

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

Важно! Сейчас команда Sass поддерживает только компилятор Dart Sass. Старые версии, основанные на Ruby, не поддерживают многие новые возможности Sass.

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

sass --watch sass:css --style=compressed

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

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

Если не нужно создавать map-файл, то добавьте параметр --no-source-map.

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

В некоторых случаях нужно просто выполнить компиляцию файлов без режима watch. В этом случае можно сделать sass-compile.bat:

sass --update sass:css --style=compressed

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