Много файлов SCSS / SASS в одном файле CSS?

Question

Можно ли заставить sass прослушивать каталог со многими sass-файлами и генерировать один CSS-файл?Я нашел способ, включив много файлов sass в один (style.scss):

@import "scss/header";
@import "scss/footer";

И затем запустите следующий код:

sass --watch style.scss:style.css

, но проблема в том, что у меня естьчтобы изменить этот файл, прежде чем я создам новый файл CSS.

Answer 1

Если вы посмотрите каталог, sass сможет заметить изменения в @imported файлах и обновить зависимые файлы.

style.scss:

@import "header";
@import "footer";

И выполнить:

sass --watch .

Он скомпилирует все файлы в каталоге в .css;игнорирование файлов, имена которых начинаются с _.

Если вы измените _header.scss или _footer.scss, если тоже обновите style.scss.

Вы также можете вывести в другой каталог:

sass --watch .:output_dir/

Answer 2

Вы можете указать SASS просматривать всю папку с помощью:

sass --watch application/sass:public/stylesheets

Если вы импортируете все ваши частичные файлы, это должно сгенерировать один файл.Каждый раз, когда вы редактируете файл в папке, файлы CSS будут генерироваться автоматически.

Answer 3

Просто хотел добавить, Вы также можете вызывать переменные ($) и Mixins из других файлов.

Например:

_variable.scss = $primary:#000 _header.scss = header {color:$primary;} _footer.scss = footer {background:$primary}

custom.scss :

@import "_variables.scss";
@import "_header.scss";
@import "_footer.scss";

Выходные данные = custom.css

header {color:#000;}
footer {background:#000;}