React Sassスタイリング
Sassとは
SassはCSSプリプロセッサです。
Sassファイルはサーバー上で実行され、CSS をブラウザーに送信します。
Sassの詳細については、Sass チュートリアルを参照して下さい。
Sassは使えますか？
プロジェクトでcreate-react-appを使用すると、React プロジェクトでSassを簡単にインストールして使用できます。
ターミナルで次のコマンドを実行して、Sassをインストールします。
>npm i sass
これで、Sassファイルをプロジェクトに含める準備が整いました。
Sassファイルを作成する
CSSファイルを作成するのと同じ方法で、Sassファイルを作成しますが、Sassファイルにはファイル拡張子は.scssです。
Sassファイルでは、変数と他の Sass関数を使用できます。
例
my-sass.scss:
テキストの色を定義する変数を作成します。
$myColor: red;
h1 {
color: $myColor;
}
CSSファイルをインポートしたのと同じ方法でSassファイルをインポートします。
例
index.js: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 />);
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。