Sass convert multiple scss files to css

Question

My first day of using SASS and I am already stuck.

I have a directory with a bunch of .scss files and some sub-directories containing more .scss files. I have to convert them all to .css, maintaining the same directory structure.

Here is the directory structure-

src
  |-scss
     |- _base.scss
     |- _reset.scss
     |- themes
            |- _light.scss
            |- _dark.scss
  |-css

I want to compile all .scss files in scss dir to .css files in css dir, keeping the same directory structure. I can do it one file at a time but not all in one shot.

I have tried-

sass --watch scss:css
sass --update scss:css
sass --update `pwd`/scss:`pwd`/css
compass watch scss:css

but none worked. I haven't tried sass-globbing yet.

I am sure I am missing something very basic here but I am not able to find any help with this. What is that stupid thing that am missing here?

Answer 1

When you start the filename of a Sass-file with undescore this means that it is not to be compiled to a CSS-file. To duplicate the structure you need to remove the underscore from the filenames.

You use underscore to structure your sass-code and then include it in a non-underscored file which is then compiled to CSS.

If you want to use sass this way you could add a file like this:

scss/main.scss:

@import "base";
@import "reset";
@import "themes/light";
@import "themes/dark";