みんな使ってる！今更聞けない[SCSS]とは？

投稿日 2023年5月17日
更新日 2023年5月19日
著者株式会社サイバーシップス
カテゴリー webサイト制作
カテゴリー webデザイン

この記事では、皆様に分かりやすく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の公式サイトに移動できます。＊別タブで開きます

▼公式サイト

VS Code

リンクから飛ぶと次の様なページが出てきます。

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

1.2 Live Sass Compilerをインストール

VS Codeのインストールが終わりましたら、次はSCSSをCSSへとコンパイルする機能を導入しましょう。
コンパイルとはざっくり説明すると特定のプログラミング言語を他の言語を使って記述された同じ内容に形を変えるということです。ここでは単純に拡張子「.scss」のものを「.css」へと変換することになります。

インストール方法はとても簡単です。

▼「Live Sass Compiler」の導入手順
①VSCodeの拡張機能メニューを開く
②検索窓から「Live Sass Compiler」を検索
③インストールボタンを押し実行する