How to compile all scss files located in different folders?

I have a file structure as follows:

all_skins
|— 1
  |— css
     |- _skinVariables.scss
     |— file.scss
     |— file.css
|— 2
  |— css
     |- _skinVariables.scss
     |— file.scss
     |— file.css
|— 3
  |— css
     |- _skinVariables.scss
     |— file.scss
     |— file.css
common_css
| _specificCode.scss
| _otherCode.scss

Inside my scss file for each "skin" I'm importing some general scss partials such as _skinsVariables and _specificCode. The _skinVariables partial changes for each skin, and the _specificCode is a general partial reused in all the scss files located outside the all_skins directory.

The problem is that whenever I make a change in the specificCode partial file, I need to recompile manually each scss file to generate the new css with the modified code.

I'm using PhpStorm's file watcher, so any change to the specific scss file triggers the watcher, but a modification to the included _specificCode (or any included partial) doesn't trigger it.

Is there any way to compile all the scss files inside a parent folder? There are over 30 of these numbered sub-folders, so doing it by hand is time consuming.

Any solution using command line, PhpStorm itself, or other software such as grunt will do for me (least desired).

Edit:

The file.scss would be as follows:

@import "skinVariables";
@import "../../../common_css/specificCode"

To be a bit clearer, the problem is that I have the partials included in all my file.scss, to make life easier most of the code comes from the partials.

When I modify a partial that is imported in all the files, such as _specificCode.scss, I would need all the file.scss to be re-compiled, but this doesn't happen.

The way the watchers seem to work at the moment is that they're triggered only when a modification is done to the file.scss itself, not to the partial that is being included.

Any work around this?

Solution

So now you have the file watcher set to watch the open files and in case of modification it should compile ONLY the file itself.

What you need is to set your scss transpiler to compile the /all_skins/1/css/file.scss, /all_skins/2/css/file.scss, etc., but I don't know if the ruby transpiler you're using is capable of this setting.

I solved something similar with http://gulpjs.com (Grunt alternative) with Gulpfile.js config like this (altered to your paths):

gulp.task('styles', function() {
    return gulp.src([
            'all_skins/**/*.scss'
        ])
        .pipe($.sass())
        .pipe($.autoprefixer('last 3 version'));
});

Then set a PhpStorm's file watcher to watch whole all_skins and common_css folder (can be set by "scopes") and run gulp task named "styles" and it should work.