Many SCSS/SASS files to one CSS file?

40
votes

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.

4
htmlcsssass

4 Answers

61
votes

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/
5
votes

You can tell SASS to watch an entire folder with:

sass --watch application/sass:public/stylesheets

If you import all your partial files, this should generate one file. Every time you edit a file in the folder, the CSS files will be generated automatically.

2
votes

I was having quite a frantic googling session trying to resolve this issue.
Turns out it's quite simple if you're using Rictwick Live Sass Compiler on VS Code.

  1. Make sure to save your sass/scss files starting with an underscore eg: _variables.scss, _mixin.scss.

  2. @import them into the main style.scss file you want to compile. Eg: 

    @import "_mixins";
@import "_variables";
  3. Pretty much that's it, you've compiled all your .scss files into a single CSS file.
0
votes

Just wanted to add, You can also call Variables ($) and Mixins from other files.

For Example:

_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";

Output = custom.css

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