SASS-Ausgabe von einer Sass-Datei zu mehreren CSS-Dateien

Question

Ich möchte mehrere CSS-Dateien aus einer Sass-Datei ausgeben. Ich habe eine Datei: schemes.scss, mit Code wie folgt:

$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 dass das Ergebnis sind 3 separate CSS-Dateien:

Schema-light.css:

body{ 
    background-color: white; 
} 

h1{ 
    color: #111; 
} 

.subheadline{ 
    color: #222; 
} 

Schema-dark.css:

body{ 
    background-color: black 
} 

h1{ 
    color: #ddd; 
} 

.subheadline{ 
    color: #eee; 
} 

Schema-moderate.css:

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

Ist dies möglich mit reinem SASS? ..oder mit Schluck (wirklich nicht bevorzugen).

Das Extrahieren üblicher Teile von Sass und das Erstellen von 3 verschiedenen Sass-Dateien ist in meinem Fall keine Lösung. Ich habe 9 Schemata multipliziert mit Dutzenden komplexer Komponenten. Das Anfügen von Schema nach Klassen-Wrapper ist auch keine Lösung.

Answer 1

Was ist mit einem einfachen Präprozessor in reinem Ruby (oder in einer anderen Sprache, die Sie mögen), die Sie ausführen, bevor Sie Ihre Assets in CSS kompilieren?

# 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 

Mit 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); 

Die Idee ist, verschiedene scss Dateien, die von diesem Prä-Prozessor zu erzeugen. Sie werden scheme-light.scss, scheme-dark.scss etc. Dateien haben, die kompiliert werden können.

Ich denke, eine reine Sass-Lösung ist nicht möglich atm.

Answer 2

Ich glaube nicht, dass es nur mit Sass möglich ist. Wenn Sie die scss-Dateien nicht teilen, müssen Sie etwas wie Schluck verwenden.

Mit Schluck können Sie entweder die scss-Dateien (vielleicht mit Regex) und separat kompilieren, oder teilen Sie die kompilierten CSS-Dateien (möglicherweise viel langsamer). Ich kann keinen Beispielcode bereitstellen, wenn Sie kein Beispiel für Ihr scss angeben.