SASSのファイル名の最初に _ （アンダーバー）を付ける意味がわからない

Question

SCSSファイル名の最初に _ （アンダーバー）を付けるとパーシャルファイルの扱いになり、
そのファイル個別のCSSは出力されなくなるという認識でした。
例えば..

【パターンA】

- style.scssに下記を記述

@import 'aaa';
@import 'bbb';
@import 'ccc';

- 読み込むファイル

_aaa.scss
_bbb.scss
_ccc.scss

- コンパイル後

style.css にまとめられる。

※下記のファイルは生成されない
aaa.css
bbb.css
ccc.css

---

ここまではOKです。

次に上記とは同じ条件で、ただし読み込むファイルから
アンダーバーを削除した場合

【パターンB】

- style.scssに下記を記述

@import 'aaa';
@import 'bbb';
@import 'ccc';

- 読み込むファイル

aaa.scss //アンダーバー無し
bbb.scss //アンダーバー無し
ccc.scss //アンダーバー無し

============================

試してみたのですが、【パターンB】も【パターンA】と同じ結果で
style.cssにまとめられました。

アンダーバー無しの場合は下記のファイルも生成されてしまうという予測をしていたのですが
結果は生成されませんでした。

これは生成されず...
↓↓↓
aaa.css
bbb.css
ccc.css

【パターンA】と【パターンB】の結果がまったく同じなため
ファイル名の最初に _ を付ける意味がわかりませんでした。
こちらSASSにお詳しい方、説明お願いできませんか？

SASSのコンパイルに使用しているのは prepros というツールです。

Comments

[k_a]

preprosの設定でProcess AutomaticallyをOffにしていませんか？

[acbma]

Process Automatically は ON にしており、コンパイルは正常に行われています。
本質問、コンパイルされなくて困っている、というものでは無いです。

[k_a]

言葉足らずで失礼しました。
質問の意図は正しく認識できております。

`style.scss`はコンパイルされているのでONになっていることはわかりますが、アンダーバーを外した時の`aaa.scss`など、その他のファイルがOFFになっていないかの確認です。

言い換えると、プロジェクト設定全体ではOFFにしていて、`style.scss`だけONの状態になっていないかということです。

[acbma]

ご返信ありがとうございます。こちらこそ意図を汲み取れずすみませんでした。
確かにstyle.scss以外はOFFになっていました。
そこでその他のファイルもONにした上で再度確認をしてみました。

style.scssを更新
→ アンダーバーあり/無しともに aaa.css は生成されず。

aaa.scssを更新
→ aaa.css が生成される

_aaa.scssを更新
→ _aaa.css が生成される

といった感じでやはり違いがよくわかりませんでした...

[k_a]

ご記載いただいた内容は私の想定していた状況のようなので、うまく説明できないかもしれませんが回答してみますね。

Answer 1

前提

preprosの設定でProcess AutomaticallyをOffにしていませんか？

→質問の修正依頼にて確認し、style.scssのみONになっていることを確認しました。

Sassのpartialの仕様

SCSSファイル名の最初に _ （アンダーバー）を付けるとパーシャルファイルの扱いになり、そのファイル個別のCSSは出力されなくなるという認識でした。

この認識は正しいです。正しいですが、少し勘違いをしているかもしれません。

---

まず、preprosのことは忘れてSass自体の動作を考えます。
以下の4つのファイルがあるとします。

a.scss
b.scss
_c.scss
style.scss

style.scssではその他3つのファイルをインポートしています。

@import 'a';
@import 'b';
@import 'c';

**1.style.scssだけをコンパイル **

style.cssにその他のファイル内容がまとめて出力されます。
a.scss,b.scss,_c.scssはstyle.scssでimportはされていますが、コンパイル対象ではないのでa.cssなどに個別にコンパイルは行われません。これは_の有無とは全く関係ありません。

2.すべての.scssファイルをコンパイル

プロジェクト(≒フォルダ)内のすべてのSassファイルをコンパイル対象にしてみます。その際、_を先頭につけたファイルは、Sassに対してコンパイル対象から外してくれと伝えることができます。これはSass自体の仕様です。

_がついている_c.scssのみコンパイル対象から外れ、他のファイルからa.css、a.css、style.cssが作成されます。もちろんstyle.cssにはその他のファイル内容がまとめて出力されます。

preprosのProcess Automaticallyの仕様

プロジェクト全体のProcess AutomaticallyがONになっているときに、_をつけないファイルを作成するとそのファイルのProcess AutomaticallyはONになります。同じ状況で、_をつけたファイルを作成するとそのファイルはProcess AutomaticallyがOFFになります。

preprosにおける_の有無は、プロジェクト全体のProcess AutomaticallyがONの時に対象ファイルのProcess AutomaticallyをONにするか否かの判断材料であり、コンパイルを実行するかの判断材料ではありません。
コンパイルは以下の場合に実行されます。

1. 対象ファイルのProcess AutomaticallyがONになっている状態でそのファイルを保存する
2. 対象のファイルに対して手動でProcess Fileを実行する

まとめ

今回の場合、結果的に「Sassのpartial → 1.style.scssだけをコンパイル」の状況になっているため、_の有無は関係なくstyle.scssだけがコンパイルされています。

Comments

[acbma]

丁寧にご回答いただき、ありがとうございます。
新規に ddd.scss、_eee.scss を作成して検証してみましたが
おっしゃるとおり下記の結果となりました。

ddd.scss → ddd.css が生成される。※Process Automatically が ON で設定される
_eee.scss → 何も生成されない。※Process Automatically が OFF で設定される

=========================================

理解した内容としては下記の通りです。
「style.scss のみがコンパイル対象となっている限りは
アンダーバーの有無関係無くどちらでも同じ結果となる」

ただし、念のためimport用のファイルにはアンダーバーを付けておいた方が
なにかの拍子に個別コンパイルされてしまいにくいのかな...という印象です。

再度、詳しくご回答いただきありがとうございました。