【WEB開発】scss - importについて - Tech Labo F

この記事では、SCSS @import の基本的な使い方から、効率的なファイル構造の設計方法までを、
具体的な例題を交えて詳しく解説します。

1. `@import` の基本とパーシャルファイル

SCSSの@import機能とは、一つのSCSSファイルから別のSCSSファイルを読み込み、
コンパイル時に一つのCSSファイルに統合する機能です。
これにより、スタイルを機能やコンポーネント（部品）ごとに分割して管理できます。

パーシャルファイルとは？

パーシャルファイルとは、コードを分割して再利用可能にするための部品ファイルのことを指します。

読み込まれる側のSCSSファイルは、ファイル名の先頭にアンダースコア（_）を付けたパーシャルファイルとして
扱うのが一般的です。

・例： _variables.scss, _mixins.scss

パーシャルファイルは、コンパイル時に単独のCSSファイルとしては出力されません。

基本的な記述方法

@importを使用する際、パーシャルファイル名のアンダースコアと拡張子（.scss）は省略できます。

【例題：基本構造】

1. 変数を定義するパーシャルファイル (_variables.scss)

// _variables.scss
$primary-color: #007bff;
$font-stack: Arial, sans-serif;

2. メインのスタイルファイル (style.scss)

// style.scss
@import "variables"; // _variables.scssを読み込む

body {
  font-family: $font-stack;
  color: #333;
}

.button {
  background-color: $primary-color;
  padding: 10px 15px;
  border: none;
}

3. コンパイル後のCSS (style.css)

/* style.css (コンパイル結果) */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

.button {
  background-color: #007bff;
  padding: 10px 15px;
  border: none;
}

この例では、style.scssが_variables.scssを読み込み、一つのstyle.cssファイルに統合されています。

2. 大規模プロジェクトでのファイル分割と管理

プロジェクトが大きくなると、スタイルファイルも複雑化します。SCSSの@importは、この複雑さを解消し、ファイルの役割を明確にするために非常に有効です。

構造化の例：7-1パターンの導入

大規模なSCSSプロジェクトでは、7-1パターン（7つのディレクトリと1つのメインファイル）のような構造が
よく採用されます。

【ファイル構造の例】

sass/
├── base/          // リセット、タイポグラフィの基本設定など
│   ├── _reset.scss
│   └── _typography.scss
├── components/    // ボタン、カード、ナビゲーションなど再利用可能なUIパーツ
│   ├── _button.scss
│   ├── _card.scss
│   └── _navigation.scss
├── layout/        // ヘッダー、フッター、グリッドなど全体のレイアウト
│   ├── _header.scss
│   └── _footer.scss
├── abstracts/     // 変数、ミックスイン、関数など（CSSを直接出力しないもの）
│   ├── _variables.scss
│   └── _mixins.scss
└── main.scss      // すべてのファイルをインポートするエントリポイント

【例題：main.scssの記述順序】

@importでは、ファイルの読み込み順序がCSSのカスケード（スタイルの適用順序や優先順位を決める仕組み）
に影響します。
一般的には、変数の定義やリセットなど、土台となるファイルを先に読み込みます。

// main.scss

// 1. 設定・抽象 (CSS変数や関数など、最も先に定義が必要なもの)
@import "abstracts/variables";
@import "abstracts/mixins";

// 2. ベーススタイル (リセット、基本的な要素のスタイル)
@import "base/reset";
@import "base/typography";

// 3. レイアウト (ヘッダー、フッター、全体構造)
@import "layout/header";
@import "layout/footer";

// 4. コンポーネント (UIパーツ)
@import "components/button";
@import "components/card";

// (以下、ベンダー固有のスタイルやユーティリティスタイルなどを続ける)

このように構造化することで、新しいスタイルを追加したい場合やバグを修正したい場合に、
どのファイルを探せば良いかが一目で分かり、開発効率が大幅に向上します。

今回のまとめ

用語	意味
@import	一つのSCSSファイルから別のSCSSファイルを読み込み、コンパイル時にCSSを統合する機能。
パーシャルファイル	ファイル名の先頭にアンダースコア（`_`）をつけたSCSSファイル。単独のCSSとしては出力されず、他のファイルに`@import`されることを目的になります。
7-1パターン	大規模SCSSプロジェクトのファイル構造設計パターン。抽象（変数など）、ベース、レイアウト、コンポーネントなど、役割ごとに7つのディレクトリに分け、1つのメインファイルで全てを読み込む構造。