s003：Sass（SCSS）でファイルを分割管理

Sassではファイルを分割管理したものを１つにまとめて出力することができます。

※@importは2022年に削除予定
※@importは@useと@forwardに移行予定

@import '読み込むファイルパス';

CSSファイルのインポート

parts/header.scss：ヘッダー用CSS

.header {
  background-color: red;
}

parts/footer.scss：フッター用CSS

.footer {
  background-color: green;
}

style.scss：本体CSS

@import 'parts/header.scss';
@import 'parts/footer.scss';

コンパイルして生成されるCSSファイル

「header.scss」と「footer.scss」の内容が@importした「style.css」内に出力され１つのファイルにまとめられています。

.header {
  background-color: red;
}

.footer {
  background-color: green;
}

コンパイル後のファイル構成

「header.scss」と「footer.scss」がコンパイルされてCSSファイル「header.css」と「footer.css」が作成されています。

style.scss：本体CSS

「header.scss」と「footer.scss」の内容が@importした「style.css」内に出力され１つのファイルにまとめられるので「header.css」と「footer.css」は必要ありません。

@import 'parts/header.scss';
@import 'parts/footer.scss';

.header {
  background-color: red;
}

.footer {
  background-color: green;
}

パーツ用SassファイルのCSSを生成しない：パーシャル

パーツ用Sassファイル名の先頭に「_（アンダースコア）」をつけます。

ファイル名の頭に「_（アンダースコア）」がついているファイルは保存してもCSSファイルが生成されません。

style.scss：本体CSS

「_header.scss」と「_footer.scss」はコンパイルされず「_header.css」と「_footer.css」が生成されません。Sassファイル内の内容は@importした「style.css」内に出力され１つのファイルにまとめられます。

@import 'parts/_header.scss';
@import 'parts/_footer.scss';

.header {
  background-color: red;
}

.footer {
  background-color: green;
}

@importする際にパーシャルの「_（アンダースコア）」と拡張子「.scss」を省略できます。省略するかどうかは自由ですが、省略することが多いようです。

@import 'parts/header';
@import 'parts/footer';