• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ →
Вход
×
или зарегистрироваться

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

CSS, HTML, LESS, SASSПросмотров: 18258Комментарии: 813 июня 2017 г.

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


Создание сайтов (Украина) →
Как убрать предупреждение "Небезопасный ввод пароля" в FireFox
Чеклист или методика создания шаблона
twitter.com facebook.com
Другие записи сайта
Как выключать Windows?
Как выключать Windows?
Эволюции WordPress посвящается
Эволюции WordPress посвящается
Новый браузер Google Chrome
Новый браузер Google Chrome
База SQLite и основы SQL. Часть 3
База SQLite и основы SQL. Часть 3
Организация CSS-кода
Организация CSS-кода
Релиз шаблона MF 11 (февраль 2021)
Релиз шаблона MF 11 (февраль 2021)

Комментариев: 8 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

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

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

6BatyrTM07-08-2021 09:32

У меня 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-ы компиляторы.

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

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

7MAX08-08-2021 09:00

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

8Batyrtm09-08-2021 14:46

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

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

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

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

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Вот здесь можно заказать создание сайта, шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2846 | SQL: 20 | Память: 4.61MB | Вход