How to compile multiple themes in gulp-sass?

Question

I have tried to compile multiple themes using same files. My folder structure is as below

-styles
  green.scss
  red.scss
  -scss
     -control1.scss
     -control2.scss

I need the output of both control1 and control2 css files based on green and red themes.

     var gulp = require('gulp');         
     var sass = require('gulp-sass');
     var config = {
        includePaths: [
          './styles/green.scss',
          './styles/red.scss'       
        ]       
    };
     gulp.src('./styles/scss/*.scss')
        .pipe(sass(config).on('error', sass.logError))
        .pipe(gulp.dest('./style/css/'));

I am new in gulp-sass and any one please suggest is there any option available in gulp-sass or node-sass to generate multiple themes?

I need to get the output as

-styles
 -css
   -green.control1.css
   -green.control2.css
   -red.control1.css
   -red.control2.css

Answer 1

I would change the organization of your files to the setup below. I'll explain the new files next:

-styles
  main-green1.scss
  main-green2.scss
  main-red1.scss
  main-red2.scss  

  - colors
    - green.scss
    - red.scss
  -controls
     -control1.scss
     -control2.scss

As for those new .scss files. Each file would import a color file and a control file. For example, main-green1.scss would be:

@import 'colors/green';
@import 'controls/control1';

And main-green2.scss would be:

@import 'colors/green';
@import 'controls/control2';

As long as the variable names in green.scss and red.scss are the same you'll end up with the desired result. Here's a more detailed example:

green.scss

$color: #00cc00;
$background: #003300;

red.scss

$color: #e50000;
$background: #330000;

control1.scss

body {
  background-color: $background;
  color: $color;
}

control2.scss

body {
  background-color: $color;
  color: $background;
}

You would change your Gulp script to build the new main- files. The compiled files would be:

main-green1.css

body {
  background-color: #00cc00;
  color: #003300;
}

main-green2.css

body {
  background-color: #003300;
  color: #00cc00;
}

main-red1.css

body {
  background-color: #e50000;
  color: #330000;
}

main-red2.css

body {
  background-color: #330000;
  color: #e50000;
}