SASS output from one sass file to multiple css files

Question

I want to output multiple css files from one sass file. I have one file: schemes.scss, with code like this:

$schemes: (
  'light': (
    'body-background': white,
    'headline-color' : #111,
    'subheadline-color': #222
  ),
  'dark': (
    'body-background': black,
    'headline-color' : #ddd,
    'subheadline-color' : #eee
  ),
  'moderate': (
    'body-background': gray,
    'headline-color' : black,
    'subheadline-color' : #333
  )
);

@each $scheme in $schemes{
  //do something to export to separate file
  @include scheme-base-mixin($scheme);
}

so that the result are 3 separate css files:

scheme-light.css:

body{
    background-color: white;
}

h1{
    color: #111;
}

.subheadline{
    color: #222;
}

scheme-dark.css:

body{
    background-color: black
}

h1{
    color: #ddd;
}

.subheadline{
    color: #eee;
}

scheme-moderate.css:

body{
    background-color: gray
}
h1{
    color: black;
}
.subheadline{
    color: #333;
}

Is this possible with pure SASS? ..or with gulp (really prefer not).

Extracting common parts of sass and creating 3 different sass files is not a solution in my case. I have 9 schemes multiplied by dozens of complex components. Attaching scheme by class wrapper is not a solution either.

Answer 1

What about a simple preprocessor in pure ruby (or in any other language you like) which you run before you compile your assets to css?

# gen_schemes_scss.rb    
schemes_scss = File.read('schemes.scss')

%i(light dark moderate).each do |scheme|
  scss = "$scheme: #{scheme};\n" # save current scheme inside scss variable
  scss += schemes_scss # append the rest

  File.write("scheme-#{scheme}.scss", scss) # write to new .scss file
end

With schemes.scss:

$schemes: (
  'light': (
    'body-background': white,
    'headline-color' : #111,
    'subheadline-color': #222
  ),
  'dark': (
    'body-background': black,
    'headline-color' : #ddd,
    'subheadline-color' : #eee
  ),
  'moderate': (
    'body-background': gray,
    'headline-color' : black,
    'subheadline-color' : #333
  )
);

@include scheme-base-mixin($scheme);

The idea is to generate different scss files by this preprocessor. You will have scheme-light.scss, scheme-dark.scss etc. files which can be compiled.

I think a pure sass solution is not possible atm.

Answer 2

I don't think it's possible with sass only. Unless you split the scss files, you will need to use something like gulp.

Using gulp, you can either split the scss files (perhaps using regex) and compile each separately, or split the compiled css files (may be much slower). I can't provide sample code unless you provide an example of your scss.