Sassは、変数やネスト、ミックスインなどの高度な機能を利用して、クリーンで管理しやすいスタイルを作成できる強力なCSSプリプロセッサです。このガイドでは、ReactプロジェクトでのSassの使い方を説明します。
SassはSyntactically Awesome Stylesheetsの略で、CSSに機能を拡張したものです。Sassは標準のCSSにコンパイルされ、ブラウザで利用されます。
create-react-appを使用している場合、以下のコマンドを実行するだけでSassをプロジェクトに追加できます：
npm install sassインストールが完了したら、Reactプロジェクト内でSassファイルを使用できるようになります。
SassファイルはCSSファイルと同じように作成しますが、拡張子を.scssにします。Sassファイルでは、変数やネストなどの機能を活用できます。
styles.scss
$primaryColor: #3498db;
$textPadding: 10px;
h1 {
color: $primaryColor;
padding: $textPadding;
}
Sassファイルは、CSSファイルと同様にReactコンポーネントにインポートします。
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles.scss';
const Header = () => {
return (
<div>
<h1>Sassでスタイリング</h1>
<p>Sassを使ったReactアプリのスタイリング方法を学びましょう。</p>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Sassには、CSSを強力かつ柔軟にする以下のような機能があります：
変数: 色やフォント、寸法などの再利用可能な値を保存。
ネスト: 読みやすく整理されたスタイルを記述。
ミックスイン: 複数の要素で使えるスタイルを再利用。
部分ファイルとインポート: スタイルを小さなファイルに分割して必要に応じてインポート。
ネストを使用すると、CSS構造が簡潔になります。
styles.scss
$headerColor: #2c3e50;
.header {
color: $headerColor;
p {
font-size: 14px;
margin: 0;
}
a {
color: #2980b9;
text-decoration: none;
}
}
これが以下のCSSにコンパイルされます：
.header {
color: #2c3e50;
}
.header p {
font-size: 14px;
margin: 0;
}
.header a {
color: #2980b9;
text-decoration: none;
}
app.scss
$primaryColor: #1abc9c;
$secondaryColor: #16a085;
body {
background-color: $primaryColor;
font-family: Arial, sans-serif;
color: white;
h1 {
color: $secondaryColor;
text-align: center;
}
p {
text-align: center;
font-size: 18px;
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './app.scss';
const App = () => {
return (
<div>
<h1>Sassでデザイン</h1>
<p>Sassを使った簡単なReactスタイリングの例です。</p>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
スタイルを整理: 部分ファイル（_filename.scss）を使用してスタイルを小さなファイルに分割し、メインファイルでインポートします。
@import 'variables';
@import 'mixins';
@import 'header';
@import 'footer';ミックスインを使用: よく使うスタイルを再利用可能な形で定義します。
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
height: 100vh;
}Sassは、CSSの機能を強化し、Reactプロジェクトでのスタイリングを効率化します。変数、ネスト、ミックスインなどの機能を使用することで、クリーンで再利用可能なスタイルを記述できます。
上記の例を試して、Sassがあなたのワークフローをどのように改善できるかを体験してみてください！
このプロジェクトの完全なソースコードはGitHubで利用可能です。