Uscita SASS da un file sass a più file css

Question

Desidero generare più file css da un file sass. Ho un file: schemes.scss, con codice come questo:

$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); 
} 

in modo che il risultato sono 3 file separati css:

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; 
} 

Questo è possibile con puro SASS? ..o con gulp (davvero preferisco non).

Estrarre parti comuni di sass e creare 3 file SASS diversi non è una soluzione nel mio caso. Ho 9 schemi moltiplicati per dozzine di componenti complessi. Associare lo schema per classe wrapper non è una soluzione.

Answer 1

Che dire di un semplice preprocessore in puro rubino (o in qualsiasi altra lingua che ti piace) che esegui prima di compilare le tue risorse in 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 

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

L'idea è quella di generare diversi scss file da questo preprocessore. Avrai i file scheme-light.scss, scheme-dark.scss ecc. Che possono essere compilati.

Penso che una soluzione semplice non sia possibile.

Answer 2

Non penso che sia possibile solo con sass. A meno che non abbiate diviso i file scss, dovrete usare qualcosa come gulp.

Utilizzando il gulp, è possibile dividere i file scss (magari usando espressioni regolari) e compilarli separatamente, oppure dividere i file css compilati (potrebbe essere molto più lento). Non posso fornire un codice di esempio a meno che non forniate un esempio del vostro scss.