SCSSとは？CSSに代わる拡張メタ言語を覚えて優れたWebエンジニアを目指そう！

SCSSとは？

Webプログラミングを学びはじめると、HTMLの次にCSS（シーエスエス）を学ぶというのが一般的です。CSSは（Cascading Style Sheets）の略語で、Webページの文字の色、大きさ、配置、背景などの見た目（スタイル）を指定するための言語です。

そのCSSをさらに高機能にした拡張メタ言語がSCSSです。簡単に言えば、CSSをより効率的に書くことができる言語といって良いでしょう。SCSSはSass（サス）というCSSの拡張言語の1つの記法です。　

この記事ではSCSS（Sass）とは何か？SCSSの基本、SCSSのメリットやデメリットなどについて解説をしていきます。CSSを習得した方であれば、SCSSは簡単に使えますので、ぜひこの機会にSCSSについて理解を深めてください。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

CSSでできることとは？メリットや勉強方法についても解説！

SCSSはSassの1つの記法だと紹介しました。ではSassとは何でしょうか?Sassはサス、またはサースと発音し、CSSを拡張してより書きやすく、より見やすくした「スタイルシート」のことです。Sassは、これまでのCSSに不満を感じていたデザイナーやWebプログラマーのために生まれたスタイルシートと言ってよいでしょう。

Sassは人気プログラミング言語のRubyで実装されたオープンソースのスタイルシート言語で、2006年に登場しています。Sassは「Syntactically Awesome StyleSheet」の略語で、ハンプトン・キャトリン氏が設計を担当し、ネイサン・ワイゼンバウム氏が開発をしました。

SassはCSSのメタ言語です。メタ言語とは、言葉を定義する、あるいは言語に関する情報を記述するための言語のことです。

SCSSはSassの1記法で、もう一つの記法はSASSです。Sassの2種類の記法について説明をしておきましょう。

■ SCSS記法 SCSSはCSSと書き方がよく似ています。SCSSではCSSのようにネスト（入れ子）を使用しますので、CSSを利用している人であれば、直感的に書けますので、Sassの記法の中ではSCSSが一般的に使われています。SCSSで書いたファイルは拡張子が、「.scss」となっています。

■ SASS記法 SASS記法はSCSSよりも簡略化されている点が特徴です。たとえば、セミコロンや波カッコを使いません。コードがSCSSよりも簡略化された記法のため、書く時の負担がより少ない点がメリットです。SASS記法で書かれたファイルの拡張子は「.sass」です。 【参考】：Sass: Syntactically Awesome Style Sheets

SCSS(Sass)に興味が湧き、学んでみたいという方は以下の参考書をおすすめします。Webエンジニアを目指す方、初心者の方向けに書かれた参考書で、分かりやすいのが特徴です。

■ Web制作者のためのSassの教科書 改訂2版 ▪著者：平澤 隆（Latele）/森田 壮 ▪ページ数：296ページ ▪出版社：インプレス ▪発売：2017年 【参考】：Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

SCSSのメリット

SCSS(Sass)を利用することで得られるメリットを見ていきましょう。こうしたメリットが広く知られることで、WebエンジニアでSCSSを利用する人が大変多くなっています。

セレクターやプロパティのネストを利用して全体的な記述量を減らせます。また一度定義したスタイルのセットを呼び出せたり、記述済みの複雑なコードを再利用できたりするなど、作業の効率化を図れます。

SCSSでは変数や四則演算、関数などが使えるので、それらの値を書き換えるだけで、修正や使いまわしができるため、メンテナンス性が向上します。

SCSSを用いることで、記述量が減り、またコードの再利用がしやすくなるため、人為的なミス、バグが減り、コーディングの精度が上がります。

SCSSのデメリット

SCSSをはじめ、Sassの利用には前記のようなメリットがある反面、デメリットもあります。以下、SCSS（Sass）のデメリットと併せてデメリットの軽減、回避方法について解説していきます。

Sassで作成したSCSS形式のファイルはそのままではWebブラウザは認識できません。そのため、CSSに変換するためのコンパイル作業が必要となり、コンパイルを行える環境の構築が必要です。

その環境構築には様々な方法がありますが、それらを調べ、必要なツールをインストールし、操作を覚えるというハードルがあります。

ただし、WebサービスでSCSSをCSSに変換してくれるサービスである「SassMeister」を利用したり、コンパイルツールを活用したり、ハードルを下げる方法もありますので、大きなデメリットではなくなってきています。

【参考】：SassMeister

SCSS（Sass）を利用するWebエンジニアは過半数に達していると言われていますが、まだ標準言語とはなっていません。クライアントがSassを導入していなければ、メンテナンス作業を依頼された場合にはCSSを直接編集していくことになり、SCSSのメリットを享受することができなくなります。

こうした問題はどこでも起こりがちですが、クライアントの理解と協力を得ることで解決が可能です。SCSS（Sass）を使ってメリットを実感したエンジニアは、その普及を進めることでさらに大きなメリットが得られるという認識を持つことが必要です。

Sassを使うには

では実際にSassを実際に使ってみましょう。Windows環境でRubyをインストールした後にSassをインストールする方法について紹介していきます。Sass自体の編集に使う「エディタ」は普段利用しているもので構いませんが、新たにインストールする場合は「VSCode」をおすすめします。

【参考】：Download Visual Studio Code - Mac, Linux, Windows

Sassはプログラミング言語「Ruby」で実装されていることもあり、Sassの開発環境構築にはRubyを使うのが一般的です。以下のサイトにアクセスし、Rubyのインストーラーを利用してRubyをインストールします。［ダウンロード］ボタンをクリックしてダウンロードのページに移動し、『WITHOUT DEVKIT』にある最新バージョンをダウンロードします。Windows10、11の方は『Ruby 3.1.2-1 (x64)』を選択しましょう。 

インストーラーが起動したら、同意画面で同意をし、［NEXT］ボタンでそのままインストールを進めていきます。インストーラーの最終画面で［Finish］ボタンを押す前に、チェックボックスのチェックを外しておきます。

チェックしたままでも構いませんが、チェックが入っているとUNIX互換環境構築のソフトがインストールされます。インストールが完了したら、コマンドプロンプトで

ruby -v

と入力すると、Rubyのバージョンが表示されます。 【参考】：RubyInstaller for Windows

Rubyとは何か？Rubyの特徴やできることについて解説

Rubyのインストールが完了したら、続いてSassをインストールします。コマンドプロンブトで「gem install sass」と入力するだけでインストールが行われます。

インストールが済んだらコマンドプロンプトで

sass -v

と入力すれば、Sassのバージョンを確認できます。

SCSS記法のコーディングはメモ帳でも構いませんが、VSCodeなどのコードエディタを利用した方が間違いが少ないでしょう。

VSCodeを開き、メニューから「新しいテキストファイル」を選択し、表示された「Select a Language」をクリックすると言語モード選択画面が現れますので、「SCSS」を選択するとSCSS形式でコーディングができます。

コーディングが済んだら名前を付けて保存します。拡張子はデフォルトで「.scss」となっています。ここでは仮にtest.scssとします。変換後のファイル名はtest.cssです。

コマンドプロンプトでcdコマンドを用いてこのSCSSファイルを保存したフォルダに移動し、次のコマンドを実行します。

sass test.scss:test.css

次にCSS形式に変換されたtest.cssファイルを確認してみると、SCSS形式からCSSに変換されたことを確認できます。SCSS形式の例文がSassの公式サイト※に載っていますので、これを利用して試してみると良いでしょう。 【参考】：※Sass Basics

「SassMeister」という無料のWebサービスがあります。SassMeisterは、Sass（SCSS）のコードを即時にCSSに変換してくれるツールです。Sass環境を構築しなくとも手軽にSassを試すことができますので、環境構築が難しいと感じる方はこちらを試してみることをおすすめします。

GitHubアカウントを持っていると、結果をGithubのGistに保存できます。

【参考】：SassMeister | The Sass Playground! 【参考】：GitHub Japan | GitHub 【参考】：Gist - GitHub Docs

SCSSを活用して仕事の効率を上げよう

ここまで、SCSS（Sass）の概要、導入方法、メリット・デメリットについて紹介しました。Webエンジニアにとって、SCSSが強い味方になることが理解できたと思います。CSSが分かれば、SCSSは理解できると言われています。

SCSS（Sass）を習得することで、スキルアップして受注案件が増える可能性があり、効率的に案件をこなせることに繋がるでしょう。CSSを習得した方はぜひSCSSへのチャレンジをおすすめします。

CSSとは？初心者が覚えたい基礎知識から使用例まで解説！