Scssでファイル名の前に_
を配置するのはなぜですか?
_filename.scss
-なぜ_
が必要なのですか?
_(アンダースコア)はscssのパーシャルです。つまり、スタイルシートはメインのスタイルシート、つまりstyles.scssにインポート(@import)されます。パーシャルを使用する利点は、多くのファイルを使用してコードを整理でき、すべてが単一のファイルにコンパイルされることです。
アンダースコアで始まるsassファイルは部分的なものです。スタイルを論理セクションに分けておくのに良い方法です。 @import
を使用すると、これらのファイルはすべてコンパイル時にマージされます。
Sass言語ガイドから:
他のSassファイルに含めることができるCSSの小さな断片を含む部分的なSassファイルを作成できます。これは、CSSをモジュール化し、物事の保守を容易にするのに役立つ素晴らしい方法です。パーシャルは、先頭にアンダースコアが付いた単純なSassファイルです。 _partial.scssのような名前を付けることができます。アンダースコアは、ファイルが部分的なファイルであり、CSSファイルに生成されるべきではないことをSassに知らせます。 Sassパーシャルは@importディレクティブで使用されます。
_(下線)が付いたファイルは、コンパイラーによって無視されます。ただし、これらのファイルはすべて、実際にコンパイルされるファイルである単一のメインSCSSファイル(つまり、styles.scss)にインポートされます(名前に_(アンダースコア)はありません)
最終目標は、1つのSCSSファイルのみをコンパイルし、その結果として1つのCSSファイルのみを持つことであり、これにはさまざまな利点があります。
ファイル名の前に「_」を含めると、部分的ではない別のsassファイルにインポートしない限り、CSSに生成されません。
あなたのフォルダ構造はこのようなものだと仮定します
/scss
style.scss
_list.scss
/css
コマンドを実行した場合
sass --watch scss:css
style.cssおよびstyle.css.mapファイルのみが作成され、sassコンパイラーはそのコンテンツをCSSファイルに変換せずに_list.scssを省略します。
/scss
style.scss
_list.scss
/css
style.css
style.css.map
パーシャルを使用できる唯一の方法は、パーシャルを別の.scssファイルにインポートすることです
@import 'list.scss';
_test.scssの前にある「_」を削除すると、コマンドの結果は
/scss
style.scss
_list.scss
/css
style.css
style.css.map
test.css
test.css.map
パーシャルを使用する主な目的は、CSSコードを保守しやすいいくつかの部分に分割することです。お役に立てれば。ありがとう。