React Sass
Sass（Syntactically Awesome Stylesheets）は CSS プリプロセッサです。
Sass を使用すると、CSS にはまだ存在しない機能（変数、ネストルール、ミックスイン、関数など）を使用できます。
Sass ファイルはサーバー上で実行され、生成された CSS がブラウザに送信されます。
あなたは私たちのSass チュートリアルで Sass に関する詳細を学ぶことができます。
Sass をインストール
ターミナルで次のコマンドを実行して Sass をインストールします：
npm i sass
これでプロジェクトに Sass ファイルを含める準備ができました！
Sass ファイルを作成
Sass ファイルの作成方法は CSS ファイルの作成方法と同じですが、Sass ファイルの拡張子は.scss。
Sass ファイルでは、変数や他の Sass 機能を使用できます。
例
テキストの色を定義する変数を作成します：
my-sass.scss ファイルのコード：
my-sass.scss
$myColor: red;
h1 {
color: $myColor;
}
h1 {
color: $myColor;
}
CSS ファイルをインポートするのと同じように Sass ファイルをインポートします：
例
import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
import ReactDOM from 'react-dom/client';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
上記のコードでは、Sass ファイルを作成しmy-sass.scss、その中で Sass 変数を使用しました$myColor定義するh1色。次に、私たちはindex.js通常の CSS ファイルをインポートするのと同じようにこの Sass ファイルをインポートし、Headerコンポーネントでこれらのスタイルを使用しました。