1つのsassファイルから複数のCSSファイルへのSASS出力

Question

1つのsassファイルから複数のcssファイルを出力したい。 私は1つのファイルがあります：

スキーム-light.css：

body{ 
    background-color: white; 
} 

h1{ 
    color: #111; 
} 

.subheadline{ 
    color: #222; 
} 

結果は、3つの別々のCSSファイルになるように

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

：schemes.scss、このようなコードとを

scheme-dark.css：

body{ 
    background-color: black 
} 

h1{ 
    color: #ddd; 
} 

.subheadline{ 
    color: #eee; 
} 

スキーム-moderate.css：

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

が、これは純粋SASSで可能ですか？ ..またはガルプと（本当に好きではない）。

私は、sassの共通部分を抽出して3つの異なるsassファイルを作成することは解決策ではありません。私は9つのスキームに数十の複雑なコンポーネントを掛けました。クラスラッパーによるスキームのアタッチも解決策ではありません。

Answer 1

あなたの資産をCSSにコンパイルする前に実行している、純粋なルビー（または好きな言語）の単純なプリプロセッサはどうですか？ schemes.scssで

# 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 

：

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

アイデアは、このプリプロセッサによって異なるscssファイルを生成することです。 scheme-light.scss、scheme-dark.scssなどのファイルをコンパイルできます。

純粋なサスの溶液は気にはなれないと思います。

Answer 2

私はサスのみとは考えられません。 scssファイルを分割しない限り、gulpのようなものを使う必要があります。

gulpを使用すると、scssファイルを（おそらく正規表現を使用して）分割し、別々にコンパイルするか、コンパイル済みのcssファイルを分割することができます（遅くなる可能性があります）。私はあなたのscssの例を提供しない限り、サンプルコードを提供することはできません。