2011-09-05 23 views
28

sassファイルを多く含むディレクトリをsassで聴取させ、1つのCSSファイルを生成することはできますか?多くのSCSS/SASSファイルを1つのCSSファイルに変換しますか?

@import "scss/header"; 
@import "scss/footer"; 

をし、次のコードを実行します:私は1つ(style.scss)に多くのSASSファイルを含めることによって、方法を発見した

sass --watch style.scss:style.css 

をしかし、問題は、私は、そのファイルを変更する必要があります私は新しいCSSファイルを生成する前に。

答えて

47

ディレクトリを見ると、sassは@importedファイルの変更を認識し、依存ファイルを更新することができます。

style.scss:

@import "header"; 
@import "footer"; 

そして実行します。

sass --watch . 

それは.CSSするディレクトリ内のすべてのファイルをコンパイルします。名前が_で始まるファイルは無視されます。

style.scssも更新する場合は、_header.scssまたは_footer.scssを変更します。

また、他のディレクトリに出力することができます

sass --watch .:output_dir/ 
+0

ありがとう!それは魅力のように働く。 – voigtan

+1

あなたは明確にしますか? 「ヘッダー」と「フッター」はheader.scssですか?またはheader.css?サブフォルダやscreen.scssと同じフォルダにありますか? – Alisso

+0

パーシャルが別のフォルダにある場合はどうなりますか?私はそのような状況を抱えており、その場合にはたくさんの変更が必要になるため、私のCSSファイルを移動することはできません。まだ部分的に変更することは可能ですか?その後、新しいCSSのメインファイルが作成されますか? – user2718671

4

あなたはでフォルダ全体を見るためにSASSを伝えることができます:あなたはすべてのあなたの部分のファイルをインポートする場合、これは一つのファイルを生成する必要があり

sass --watch application/sass:public/stylesheets 

。フォルダ内のファイルを編集するたびに、CSSファイルが自動的に生成されます。

+0

、両方のソリューションがいいです。しかし、私の目標は、合計で1つのCSSファイルと、それ以外のものを含む1つのscssファイルだけが私にとって最善の解決策でした。答えてくれてありがとう、2日後、私は本当にそのすべての機能を気に入っています! – voigtan

0

はちょうどあなたがまた、他のファイルからの変数($)とミックスインを呼び出すことができます 、追加したいです。

_variable.scss = $primary:#000
_header.scss = header {color:$primary;}
_footer.scss = footer {background:$primary}

custom.scss

例について

働くだろう

@import "_variables.scss"; 
@import "_header.scss"; 
@import "_footer.scss"; 

出力=のcustom.css

header {color:#000;} 
footer {background:#000;} 
関連する問題