はじめに
一般的にCSSを直接記述するのはわかりづらいです。
なのでみなさんSCSSを使いましょう
この記事ではSCSS（Sassy Cascading Style Sheet）での導入方法および使い方を解説します。
この記事の内容
1. SCSSについて
2. 導入方法
3. 使い方
１．SCSSについて
SCSSはSassの派生でCSSのスーパーセットです。
これだけを聞くと何のことかわからないと思うので解説していきます。
Sassとはなにか
メタ言語でトランスパイラです。
「Syntactically Awesome Style Sheets」の略で意味は「構文的にすごくイケてるスタイルシート」らしいです。
開発者であった開発者であるハンプトン・カトリン（Hampton Catrin）とネイサン・ワイゼンバウム（Nathan Weizenbaum）がCSS書きづらいと思いいい感じに記述できてCSSに変換できる方法を提供する言語として作成したのがこのSassです。
CSSをいい感じに書ける方法を提供するファイル形式で、Sassの記述方法の一種です。
２．導入方法
npmの場合
yarnの場合
３．使い方
要素のカテゴリ別フォルダ分割方法
今回は以下のような階層図の際の使い方を考えます。
この時main.scssにはappフォルダ以下のscssをまとめた情報が展開されることになります。
そのため、App.tsxではmain.scssをインポートするだけでappフォルダ内のcomponentsとpagesの双方にアクセスすることができます。
※ フォルダ内に最終的に定義するファイル名は「_」から始まる必要があります。
これは絶対ではないのですが、scss側でフォルダ名の要素の一部であると判断するために必要となります。
そのため、ファイル名が「_」から始まるscssだと@useで直接参照することができ便利なのでできる限り「_」から始まるファイル名を使用しましょう。
App.tsx
main.scss
index.scss
_components.scss
_pages.scss
ネストしたクラスの作成
変数が使える
まとめ
上記のようにSCSSを使用すると通常のCSSを使用するよりもすっきりして可読性もあがりいいことづくめなので皆さんも使ってみてはいかがでしょうか？