Автоматическая компиляция SASS в CSS
13-06-2017Время чтения ~ 2 мин.CSS, HTML, LESS, SASS 23237
Поначалу для компиляции 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.
Скопировал код, compressed заменил на expanded. Запустил и ничего не произошло.
У меня куча sass фалов которые лежат в разных пяти папках.
В папке assets/css/ лежат следующие папки:
\.sass-cache
\1-tools
\2-basics
и т.д. ещё три папки и один файл main.sass
Подскажите, что я сделал неправильно?
Используйте для scss-файлов отдельный каталог (assets/sass). Сейчас у вас всё в куче.
Переименовал папку assets/css/ в assets/sass/, на всякий случай создал папку assets/css/, хотя батник должен сам её сделать, внёс изменения в батник:
Запустил и ничего не изменилось.
Параметры в одну строчку? Какое сообщение в консоли?
Спасибо, всё получилось!
Ошибка, как правильно сказали, параметры не в строчку были, а в столбик.
У меня Ruby Sass 3.7.4.
Запускаю:
При компиляции создается кэш.
создается style.css
Но внутри style.css то что и в style.scss.
Что за лабуда. Не могу разобраться. Может версия не подходит?
Может по подробнее напишите какие скачивать sass-ы компиляторы.
Вроде внимательно читал. Но все равно не получается компиляция.
Помогите пож.
Да, вам нужно использовать Dart Sass: https://sass-lang.com/documentation/cli/dart-sass
Dart Sass сработал. Спасибо!