htmlcsssass

Many SCSS/SASS files to one CSS file?

Is it possible to make sass listen to a directory with many sass files and generate one CSS file? I have found a way by including many sass files into one (style.scss):

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

And then run the following code:

sass --watch style.scss:style.css

but the problem is that I have to change that file before I generate a new CSS file.

Solution

  • If you watch the directory, sass will be able to notice changes in @imported files, and update dependent files.

    style.scss:

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

    And do:

    sass --watch .

    It will compile all files in the directory to .css; ignoring files whose name start with a _.

    I you modify _header.scss or _footer.scss, if will update style.scss too.

    You can also output in an other directory:

    sass --watch .:output_dir/