Hi, I'm Junya03!

最近段々と熱くなってきていますね…梅雨入りが宣言されましたが、全然雨が降っている感じもしませんし、もう夏なのかななんて思っている今日このごろです。皆様如何お過ごしでしょうか？今月はWeb技術のお話。より一層スタイルを管理しやすくなる！Scss（Sass）についてのお話ですが、すべて語るととても長い記事になってしまうので、今回はパーシャルに絞って書き起こしていきたいと思います。

---

SCSS を使いこなしていくと、どうしてもファイルが大きくなりがちです。 特にプロジェクトが成長していくと、1 ファイルで全スタイルを管理するのは非現実的になります。

そこで今回紹介するのが パーシャル（Partial） という仕組みです。

パーシャルとは？

パーシャルとは、SCSS ファイルを小さなパーツに分割して管理する方法です。

特徴

1. ファイル名の先頭に _（アンダースコア） を付ける（例：_variables.scss ）

2. コンパイル対象外（直接 CSS に変換されない）

3. @use / @forward で他の SCSS ファイルから読み込む

基本的な使い方

パーシャルファイルを作成する

// _variables.scss
$main-color: #ff6600;
$font-base: 16px;

メインファイルで読み込む

// style.scss
@use 'variables';

body {
  color: variables.$main-color;
  font-size: variables.$font-base;
}

@useで呼び出し、ファイル名.$定義名で使うことができます。

複数のパーシャル構成例

/scss/
├── _variables.scss
├── _mixin.scss
├── _reset.scss
├── _components.scss
└── style.scss（メイン）

// style.scss
@use 'variables';
@use 'mixin';
@use 'reset';
@use 'components';

応用：@forward を使って共通モジュールをまとめる

// common/_index.scss
@forward 'variables';
@forward 'mixin';

// style.scss
@use 'common';

.title {
  color: common.$main-color;
  // variablesで定義した内容を受け取れる
}

@forward は再エクスポートのようなもので、パーシャルの構造化に便利です。

⚠️ 注意：@forward はあくまで”転送”のための構文であり、そのファイル内で転送元の変数やミックスインを直接使うことはできません。 もしそのファイル内でも変数などを使いたい場合は、@use を併用してください。

まとめ

パーシャルを使うと何が嬉しい？

1. 保守性アップ：変更箇所が限定的になり、ミスが減る

2. スケーラビリティ対応：プロジェクトの成長に応じて整理しやすい構成にできる

3. 可読性向上：担当者が変わってもどこに何があるかすぐに分かるようになる

SCSS パーシャルは、大規模開発において欠かせないベストプラクティスのひとつ。業務ではゴリゴリに使っていくので、早く使い慣れるようになりたいですね。

多くの技術を学んで身に着けていっていますが、そろそろそれに合わせてサイトをリニューアルしていけたらいいななんて考えたり考えなかったり…？笑

また便利そうなものがあればご紹介できればと思います。 それではまた来月…。