SASSでのファイルのインポート

SASSファイルを扱う際、ドキュメント.scssからコードを転送したいが、拡張子.cssのクローンを作成せず、つまりそのフラグメントをインポートする必要がある場合があります。

例えば、次のようなコードを含むファイルnavbar.scssがあるとします：

navbar.scss.active {
  color: red;
}

このタイプのインポートを実行するには、まずファイル名の前にアンダースコアを追加する必要があります。このように：_navbar.scss。 次に、別のファイルstyle.scssで、ディレクティブ@importを記述しますが、インポートするファイル名ではアンダースコアとファイル拡張子を指定しません：

style.scss@import "navbar";

そして、コンパイル後のstyle.cssにファイル_navbar.scssのコードがインポートされていることがわかります：

style.css.active {
  color: red;
}

main.scss.block-content {
  padding: 10px;
  margin-left: auto;
  width: 600px;
  font-size: 14px;
}