sass_3-7 sassの@import

sassは分割したscssを一つのcssファイルとして書き出す事が出来る。
ファイルを分割するには「_」から始まる名前にする必要がある。
また、そういった部分的なファイルをpartial と呼ぶらしい。

// _ を省略してインポート
@import "module.scss";

// _ と 拡張子を省略してインポート
@import "module";

// 一階層上からインポート
@import "../module.scss";

// commonフォルダからインポート
@import "common/module";

メインのscssに読み込むには上のように書いていく。
接頭辞や拡張子を省略して書くことが出来る。

また、違う階層から読み込む場合は、下のように書く。

// 一階層上からインポート
@import "../module.scss";

// commonフォルダからインポート
@import "common/module";

こんな使い方も出来るみたい。

sass

.oldArea {
  @import "old";
}
p {
  margin-bottom: 1.5em;
}

書き出したCSSはこうなる。

.oldArea .item {
  margin: 10px;
}
.oldArea p {
  margin: 0 0 10px;
}

p {
  margin-bottom: 1.5em;
}

_old.scssにmarginが指定されていたので、元々のものと合わさってこうなる感じ。

@importはどこに記述してもいいらしい。
最初でも最後でも可能。

分割して、一つのCSSにまとめる事によって管理もしやすく、読み込みも早くなる。

参考

【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる ｜ Developers.IO

【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に（partialについて） - CSS HappyLife