SASS output multiple different files by variables - css

Question

I am working on a project that involves different themes for each subpage. Each subpage has the exact same HTML markup as a frame, but on every subpage, the same elements - such as headings - must have different colors.
The way I am tackling this problem is to have every single declaration that differs on subpages in their corresponding CSS files, such as red.css or blue.css. These files contain only the color declarations of the selectors that must be different, so font-sizes and everything else is in the global CSS file.
What I am hoping to accomplish is to have the color variables declared in a file and create a SCSS frame for the theme CSS files that include the corresponding variables for the CSS declarations. In a more clear way:
Example of the variable declarations:
$red: red;
$blue: blue;
And the theme frame SCSS file should look something like this:
h1 {
color: $heading-color;
}
And the goal is to make SASS loop through the variables and create an X number of different CSS files that have the same frame, but each of them should have their corresponding values at the right places, so blue.css should have the blue values, red should have the red values, etc.
Is this possible to do? What I'm trying to avoid is to make X SCSS files with the exact frame in it, but with different values for their values, as this means X number of editing every time something changes.

Answer 1

With SASS you can import files which contain common CSS rules. Just create 2 files, each with different variables definition and include everything other from another scss file. Like this:
theme1.scss:
$primaryColor: red;
$secondaryColor: blue;
#import 'all';
theme2.scss:
$primaryColor: orange;
$secondaryColor: violet;
#import 'all';
_all.scss
/*All your CSS rules including for example:*/
h1 {
color: $primaryColor;
}
SASS will compile into 2 files theme1.css and theme2.css but there is no need to write duplicate CSS.