web-dev-qa-db-ja.com

多くのSCSS / SASSファイルから1つのCSSファイルへ？

Sassに多数のsassファイルがあるディレクトリをリッスンさせ、1つのCSSファイルを生成することは可能ですか？多くのsassファイルを1つに含める方法を見つけました（style.scss）：

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

次に、次のコードを実行します。

sass --watch style.scss:style.css

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

htmlcsssass
35
voigtan

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

style.scss：

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

そして、やります：

sass --watch .

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

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

他のディレクトリに出力することもできます：

sass --watch .:output_dir/
56
Arnaud Le Blanc

SASSにフォルダ全体を監視するように指示するには、次のようにします。

sass --watch application/sass:public/stylesheets

すべての部分ファイルをインポートすると、1つのファイルが生成されます。フォルダ内のファイルを編集するたびに、CSSファイルが自動的に生成されます。

5
Luwe

追加したいだけで、他のファイルから変数（$）とMixinsを呼び出すこともできます。

例えば：

_ 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;}
0
Dharam Mali