React Sass Styling

1. Sassとは？

Sass（サス）はCSSプリプロセッサ（CSS Pre-processor）です。

Sassファイルはビルドプロセス中に実行され、最終的にブラウザが理解できるCSSとして出力されます。Sassを使用することで、標準のCSSにはない「変数（Variables）」「ネスト（入れ子構造）」「ミックスイン（Mixins）」などの便利な機能を利用できるようになります。

2. ReactにSassを追加する

ReactプロジェクトでSassを利用するには、まず sass パッケージをインストールする必要があります。

ターミナルで以下のnpmコマンドを実行してください：

npm install sass

これで、プロジェクト内でSassファイル（.scss）を使用する準備が整いました。

3. Sassファイルの作成

Sassファイルの作成方法は通常のCSSファイルと同様ですが、拡張子には .scss を使用します。

3.1 実装例

新しく作成した .scss ファイルに、簡単なスタイリングを記述してみましょう。

MyStyle.scss

// 変数を定義
$myColor: red;

h1 {
  color: $myColor;
}

4. Sassファイルのインポート

作成したSassファイルをReactコンポーネントでインポートします。

4.1 実装例

main.jsx

import { createRoot } from 'react-dom/client';
// Sassファイルをインポート
import './MyStyle.scss';

function MyHeader() {
  return (
    <h1>マイ・ヘッダー</h1>
  );
}

createRoot(document.getElementById('root')).render(
  <MyHeader />
);

5. Sassモジュール (Sass Modules)

Sassには、色、数学計算、文字列などを操作するための多くのビルトインモジュール（Built-in Modules）が用意されています。

その一例が sass:color モジュールです。このモジュールを使用すると、パーセンテージを指定するだけで色を暗くしたり明るくしたりする関数を利用できます。

5.1 実装例

MyStyle.scss

@use 'sass:color';

$myColor: red;

h1 {
  color: $myColor;
}

h2 {
  // 色を20%暗くする
  color: color.adjust($myColor, $lightness: -20%);
}

h3 {
  // 色を20%明るくする
  color: color.adjust($myColor, $lightness: 20%);
}

これらのヘッダーをコンポーネントに追加してみましょう。

5.2 コンポーネントへの適用

main.jsx

import { createRoot } from 'react-dom/client';
import './MyStyle.scss';

function MyHeader() {
  return (
    <div>
      <h1>マイ・ヘッダー 1</h1>
      <h2>マイ・ヘッダー 2</h2>
      <h3>マイ・ヘッダー 3</h3>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <MyHeader />
);