web-dev-qa-db-ja.com

先頭のアンダースコアを使用して@importをSass

先頭のアンダースコアを使用せずにSASS/SCSSパーシャルをインポートすることがベストプラクティスであることを理解しています。例えば.

@import 'normalize-scss/normalize'; 
// this imports ./normalize-scss/_normalize.scss

オタクの完全性に対する私の質問は、ファイルがアンダースコアを使用してインポートされた場合、何か影響がありますか？

@import 'normalize-scss/_normalize';
sasspartials
27
Timidfriendly

いいえ。ファイルが_foo.scssの場合、あいまいなファイル名がない限り、これらのインポートはすべて同じ結果になります（存在する可能性のある副作用がない限り）。

@import "foo";
@import "foo.scss";
@import "_foo";
@import "_foo.scss";

同じ名前で拡張子が異なるファイル

拡張が必要な​​のは、同じ検索パスに_foo.scssと_foo.sassの両方がある場合だけです。どちらを指定しないと、次のエラーが発生します。

    error sass/test.scss (Line 7: It's not clear which file to import for '@import "test/bar"'.
Candidates:
  test/_bar.sass
  test/_bar.scss
Please delete or rename all but one of these files.
)

同じ名前のファイルですが、先頭にアンダースコアが付いています

Foo.scssと_foo.scssの両方がある場合、foo.scssが優先されます。代わりに_foo.scssが必要な場合は、インポートステートメントにアンダースコアを追加する必要があります。

@import "test/_foo";

Sassは、インポートステートメントがどのようなものであっても、保存するたびに警告を表示します。

WARNING: In /path/to/test:
  There are multiple files that match the name "bar.scss":
    _bar.scss
    bar.scss
20
cimmanon

ファイル名の先頭にアンダースコアを追加すると、Sassはそれをコンパイルしません。したがって、必要ない場合はcolors.scssをコンパイルしてcolors.css、ファイルに名前を付ける_colors.scss代わりに。この方法で名前が付けられたファイルは、Sass用語ではパーシャルと呼ばれます。

Sassのインポート機能の詳細については、こちらをご覧ください こちら

11
Nesha Zoric