なぜscss / cssでファイル名「_」または「_」の前に置くのですか?


147

なぜ_scssでファイル名の前に置くのですか?

_filename.scss-なぜ必要なの_ですか?

回答:


147

_(アンダースコア)は、scssのパーシャルです。つまり、スタイルシートがメインスタイルシート(styles.scss)にインポート(@import)されます。パーシャルを使用する利点は、多くのファイルを使用してコードを整理でき、すべてが単一のファイルにコンパイルされることです。


3
しかし、import '_file';import '_file';同じことを右にしますか?
tom10271 2017

20
@aokaddaocは同じコード行を書いたようです:)
Amit

20
私の間違いを指摘してくれてありがとう。「しかし、import '_file';import 'file';同じことを右にしますか?」
tom10271 2017年

5
コンパイラー/プリプロセッサーにファイルを1つだけ送信するようにファイルを構造化する場合、ファイルの前に付加することが重要なのはなぜ_ですか?ファイル名からアンダースコアを削除することを検討しています。Sassファイルがパーシャル(つまり、インポート可能なコード)であるかどうかは、ファイルの命名方法ではなく、プロジェクトのアーキテクチャでのその場所に依存する必要があります。
ESR

1
@ESR:同意しました。この機能は、最新のWeb開発環境では少し時代遅れに感じられます。_プロジェクトが合理的な方法で構造化されている場合は、s は必要ありません。
Chris Jaynes、

55

アンダースコアで始まるsassファイルは部分的です。スタイルを論理的なセクションに分けておくのに良い方法です。これらのファイルはすべて、使用時にコンパイル時にマージされます@import

Sass言語ガイドから:

他のSassファイルに含めることができるCSSの小さなスニペットを含む部分的なSassファイルを作成できます。これは、CSSをモジュール化し、維持管理を容易にする優れた方法です。パーシャルは、先頭に下線が付いた名前のSassファイルです。_partial.scssのような名前を付けます。アンダースコアは、ファイルが部分的なファイルであり、CSSファイルに生成されるべきではないことをSassに知らせます。Sassパーシャルは@importディレクティブで使用されます。

http://sass-lang.com/guide


13

ファイル名の前に「_」を含めると、部分的でない別の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';

_list.scssの前にある「_」を削除すると、コマンドの結果は次のようになります。

/scss
 style.scss
 list.scss
/css
 style.css
 style.css.map
 list.css
 list.css.map

パーシャルを使用する主な目的は、CSSコードを保守しやすいいくつかの部分に分解することです。お役に立てれば。ありがとう。


2
これが正解です。ただし、_index.scssの特殊なケースについても言及していませんでした: sass-lang.com/documentation/at-rules/import#index-files
tiffon

11

_(アンダースコア)が付いたファイルは、コンパイラーによって無視されます。ただし、これらのファイルはすべて、実際にコンパイルされるファイルである単一のメインSCSSファイル(つまり、styles.scss)にインポートされます(名前に_(アンダースコア)が含まれていません)。

最終的な目標は、SCSSファイルを1つだけコンパイルし、その結果としてCSSファイルを1つだけにすることです。これには、さまざまな利点があります。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.