この記事では、皆様に分かりやすくSCSS(SASS)についてお伝えします。
Webプログラミングを学びはじめると、HTMLの次にCSS(シーエスエス)を学ぶというのが一般的だと思います。
そのCSSをさらに高機能にしたメタ言語が「SCSS」です。ざっくりと紹介するならば「CSS」をより効率的にかける言語になります。
「SCSS」は「SASS」というCSSの拡張言語の一つの記法です。
CSSを習得した方であれば、SCSSは簡単に扱う事ができますので、是非この機会に「SCSS」に触れてみてください。
メタ言語について
メタ言語とはある言語に対して何らかの記述をする際に用いるものです。拡張言語とも呼ばれます。
特徴としては、メタ言語単体では具体的な使用に関する目的を持っていないという点です。
SASSも同様に最終的には「SASS」単体ではなく「CSS」へと変換されて使用されます。
SCSS(SASS)とは?

SASS=Syntactically Awesome StyleSheets の略称です。
日本語では一般的に「サース」と呼ばれています。*筆者は「サス」と読んでおります。どちらでもOK。
・Syntactically=構文的に
・Awesome=凄い・素晴らしい
・StyleSheets=スタイルシート
上記の言葉から成り立つ「SASS」は直訳すれば「構文的に素晴らしいスタイルシート」と直訳できます。
ちなみにスタイルシートとは文章の表示形式(文字の色、大きさ等)を変更する仕組みの事です。
みなさんがよく聞くスタイルシート言語としては「CSS」があり、主に「HTML」で使用されております。
スタイルシート言語にも幾つか種類はありますが、その普及率からスタイルシートといえば「CSS」を
表す事がほとんどです。
SASSを利用するメリット

最初に説明したようにSASSはCSSを効率的に記述する為のメタ言語ですが、見方を変えればCSSを記述する際に
必ずしもSASSが必須という訳ではありません。
それでも多くの人がSASSを導入する理由は、そこに様々なメリットがあるからです。
一番大きなメリットとして効率的に書けると記載しましたが、それがなぜなのか説明したいと思います。
ネスト(入れ子構造)で記述できる
SASSとCSSの大きな違いが、ネスト(入れ子構造)で記述できる点です。

たとえば上の様なテキストを表示したい際に下の様なHTMLを記述したとします。

div(box)という親要素とその中にあるh2、pに対してCSSにて記述をする場合

上の様にそれぞれのタグに対して記述をしています。
これをSCSSを使用して記述すると

この様にbox内の{}の中にh1タグとpタグをそのまま記載する事ができます。
今回は簡単な例を使用したのでメリットが分かりづらいかもしれませんが、実際にHPを作成していくとなると
かなりコーディングの手間と時間を省ける様になります。
モジュール化する事ができる
SCSSでは機能ごとにファイルを分ける事ができる為、スタイルを管理しやすくなるというメリットがあります。
ファイルの確認や修正をする際に、スタイルシートを分割しておくことができる為、目的のファイルを見つけや
すくなます。

たとえば上の様な表示をしたいとき

通常のCSSで記述すると下の様になると思います。

これをSCSSでファイルを分けた場合


この様に二つのファイルに分けて管理をする事ができます。
HPを制作していくと、HTML内でheader、main、section…と使うタグの種類は多くなるかと思います。
その中で「CSS」だと修正等を行いたい際に探すのに苦労するところを、「SCSS」でファイルを分ける事によって
時間の大幅な短縮に繋がります。
分けたファイルを呼び出すのもとても簡単です。

この様にstyle.scss内に[@use “ファイル名”;]を入れることによって、分けたファイル内のコードを呼び出す事ができます。
このとき呼び出すファイルの名前の先頭に[_](アンダーバー)を入れるのを忘れないようにしてください。
上の画像の様な場合だと[_main.scc],[_footer.scss]の様にファイルを作成しています。
*style.scc内で呼び出す際は[_](アンダーバー)は必要ありません。
もちろんここまでで紹介させて頂いた二つ以外にもたくさんのメリットがありますが、少し複雑な内容等も出てきますので今回は割愛させて頂きます。
では機能をざっくりと知ってもらったところで、使い方について説明をさせて頂きます。
SCSSの使い方

SASS・SCSSのコンパイル環境を導入する
1.1 VS Codeをインストール
今回は筆者も愛用しております「VS Code」を使用する前提でお話しさせて頂きます。
PC上に「VS Code」が入ってない方はインストールから始めましょう。
下のリンクから、Microsoftの公式サイトに移動できます。*別タブで開きます
▼公式サイト
リンクから飛ぶと次の様なページが出てきます。

ページの右上にあるDownloadボタンを押すと、下の画面が現れるのでそれぞれの環境にあったものを
ダウンロードしてください。
細かいダウンロード方法や日本語化については、別の記事にて解説しようと思うので今回は省略させて頂きます。

1.2 Live Sass Compilerをインストール
VS Codeのインストールが終わりましたら、次はSCSSをCSSへとコンパイルする機能を導入しましょう。
コンパイルとはざっくり説明すると特定のプログラミング言語を他の言語を使って記述された同じ内容に形を変えるということです。ここでは単純に拡張子「.scss」のものを「.css」へと変換することになります。
インストール方法はとても簡単です。
▼「Live Sass Compiler」の導入手順
①VSCodeの拡張機能メニューを開く
②検索窓から「Live Sass Compiler」を検索
③インストールボタンを押し実行する

以上で「Live Sass Compiler」のインストールは完了です。
[Live Sass Compiler]の使い方
では実際に「Live Sass Compiler」を使用していきましょう。
今回は「SCSS」で書いたコードを参考にしながら、プラグインの使い方を紹介します。
2.1 コンパイルの監視を開始する
まずはSCSSのコンパイルが自動で行われる様に「コンパイルの監視」をスタートさせます。
「コンパイルの監視」は、Live Sass Compilerのインストール後にVSCodeの画面下部に追加される「Watch Sass」というボタンをクリックすると監視がスタートされます。

ボタンを押すと「Watch SASS」の表記が「Watching…」へと変化します。
この状態でSCSSファイルの作成、内容の変更をすると自動でCSSファイルへとコンパイルが行われる様になります。
2.2 SCSSのコーディングを行う
コンパイルの監視ができましたので、実際にどの様にSCSSのコーディングが出来ていくのか解説していきます。
今回は下のSCSSコードを例に解説します。

まずVSCodeで上記の様な内容のコードを貼り付けたSCSSファイルを作成します。
*コードは何でも構いません

SCSSファイルを作成したら、先ほど説明した「Watch Sass」を押してコンパイルの監視をスタートします。
するとSCSSファイルに対してコンパイルが実行されます。

この際に確認する点は2点あります。
1つ目はエクスプローラー上にCSSファイルが作成されていること。2つ目はCode画面下の「出力」パネルにコンパイル結果が出力されていることです。
実際にコンパイル結果にて生成されたCSSファイルを見てみましょう。

上の様に生成されたファイル内にCSSの内容が反映されていれば「Live Sass Compiler」を使ったSCSSのコンパイルは成功しています。
もしコンパイルが上手くいかなかった場合は出力パネルにエラー内容が表示されます。
出力パネルに表示される情報はSCSS修正のヒントにもなるので、Live Sass Compilerを使ってコーディングをする際は出力パネルにも注目しながら作業をしてみるのもいいでしょう。
以上で「Live Sass Compiler」の使い方の解説は終わりです。
SCSSを利用する際の注意点

ファイル数が多くなる
SCSSはファイルを分けることで管理しやすくなるというメリットがありますが、逆をいえば管理するファイルが増え過ぎてしまうこともあります。
使用する際は管理しやすいファイル数に留めることも意識するといいでしょう。
ネスト構造が深くなる
ネスト構造を利用できることによってプログラミングを効率的に記述できる反面、構造が深くなりすぎるという点があります。
ネストを深くしすぎるとCSSの読み取りが遅くなる可能性もあります。
ただ筆者は今まで使用してきて問題に感じたことはありませんのでよっぽど深くなった場合だと思います。
まとめ
最後まで読んでいただきありがとうございます!
今回はCSSをより効率的に記述できるSCSSについて解説させて頂きました。
SCSSの機能をより知ることでヒューマンエラーの防止、プログラミングの時間と手間を短縮できますので是非みなさん活用してみてください。
皆様のお役に少しでもなれたら嬉しいです!頑張りましょう!