Сайт вебмастера

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

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

Поначалу для компиляции 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.

Похожие записи
Комментарии (8) RSS
1 Николай 2018-09-06 15:19:01
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

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


2 Admin 2018-09-06 18:12:59 admin

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


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

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

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

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


4 Admin 2018-09-06 19:27:05 admin

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


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

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

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


6 BatyrTM 2021-08-07 09:32:01

У меня Ruby Sass 3.7.4.

Запускаю:

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

При компиляции создается кэш.

создается style.css

Но внутри style.css то что и в style.scss.

@use 'modules/copyright';@use 'modules/reset';@use 'modules/utilities'

Что за лабуда. Не могу разобраться. Может версия не подходит?

Может по подробнее напишите какие скачивать sass-ы компиляторы.

Вроде внимательно читал. Но все равно не получается компиляция.

Помогите пож.


7 Admin 2021-08-08 09:00:29 admin

Да, вам нужно использовать Dart Sass: https://sass-lang.com/documentation/cli/dart-sass


8 Batyrtm 2021-08-09 14:46:41

Dart Sass сработал. Спасибо!