【Sass入門】意味から使い方、メリットまで基本を紹介

一般的にHTMLとCSSはフロントエンドにおいてプログラミングの基本と呼ばれる言語であり、プログラミング初心者の方でも概ね知っているものと思われます。
そのうえで本記事では、Webサイト上のデザインを設定する役割を担うCSSをより便利に効率良く記述するための言語「Sass」についてフィーチャー。
名前だけなら聞いたことがあるといったレベルの認識の方にこそ読んでもらいたい、基礎知識がメインの内容です。
難しそうと構えなくても大丈夫。
もちろんSassの利用を検討している方にも役に立つはずです。
そういうわけで、Sassの意味から使い方、メリットまで、基本を中心に網羅的に解説していきます。

Sassとは？

Sassとは「Syntactically Awesome StyleSheets」の略称です。日本語では「サース」と読まれています。
各ワード「Syntactically＝構文的に」「Awesome＝凄い・素晴らしい」「StyleSheets＝スタイルシート」で成り立つSassは「構文的に凄いスタイルシート」と直訳できます。

ちなみにスタイルシートとは文書の表示形式（字体や文字の大きさ、色、行間の幅など）をコントロールする仕組みのことです。広く普及しているスタイルシート言語としてはCSS（Cascading Style Sheet）があり、主にHTMLで記述された文書のデザインを設定する際に使用されています。
スタイルシート言語には幾つか種類がありますが、特に普及しているという理由もあってか、単にスタイルシートといえばCSSを意味することがほとんどのようです。

メタ言語について

Sassは、CSSのメタ言語に該当します。
メタ言語（meta-language）とは、ある言語について何らかの記述をするために用いるものです。拡張言語とも呼ばれています。
有名なメタ言語としてはXMLやSGMLがあります。特徴としては、メタ言語単体では具体的な使用に関する目的を持っていないことです。Sassも同様。Sass単体ではなく最終的にはCSSへと変換して使用される言語です。

メタ言語を活用すれば、より効率的な記述が可能となります。したがってSassは「新しいプログラミング言語」というニュアンスよりも、「CSSの新しいオプション」というイメージが近いでしょう。

Sassを利用するメリット

前述した通り、SassはCSSを効率的に記述するためのメタ言語ですが、見方を変えると、CSSを記述するうえでSassが必須という訳ではありません。
それでもSassを導入する理由は、様々なメリットに価値があるからです。
代表的なメリットとして作業効率のアップが挙げられます。
ではなぜ、Sassを利用すると作業が捗るのでしょうか。

ネスト（入れ子構造）で記述できる

SassとCSSの大きな違いが、ネスト（入れ子構造）による記述が可能な点です。CSSでは親要素と子要素がある構造の場合、子要素を書く度に親要素との関係を記述する必要があります。例えば「p」という親要素に対して子要素が2つ以上ある場合、子要素を指定する度に親要素である「p」を記述しなければいけません。しかし、ネスト（入れ子構造）で記述すれば親要素の中に複数の子要素をまとめられるため、手間が省けます。
このメリットは、コードの記述量が減ることによる作業効率の向上だけではありません。子要素が一箇所に集まることで、構造が把握しやすくなるという点も非常に大きいです。

変数が利用できる

変数とは数値や文字列を代入する（プログラムにおける）箱のようなものです。変数を使えば修正が必要になったとしても、最小限の量で済むため効率的です。
例えば、九九で8の段（8×1～8×9）を書いたとします。これを9の段に修正する場合、8をすべて9に変える手間が発生します。一方で変数yを設定した場合、8を代入しておけばy×1～y×9が自動的に8の段として処理してくれます。
もうお分かりですね。9の段に修正したければ、代入する値を9に変えるだけで済むわけです。

このように変数の値を修正するだけで、指定された全ての要素が変更可能となり、後々の作業を効率的に行えます。CSSでも変数を利用できないわけではありませんが、非対称のブラウザもあるため、使用に制限があるというのは知っておきたいところです。
他方、Sassであれば、ブラウザに依存せず変数を使うことができます。

ミックスイン（@mixin）機能が利用できる

Sassにはミックスイン（@mixin）機能が搭載されています。
ミックスインとは、定義したCSSのスタイル（文字や画像などの見た目に関する要素や属性）を複数箇所で使い回せる機能です。
基本的な使い方としては、まず@mixinの後に定義したいスタイルを記述します。
記述したスタイルを適用させるには、該当位置で、@includeを用い呼び出します。
これでOKです。
同じスタイルを複数箇所で使う場合、上述した通りミックスイン機能を使えばコードの量が減らせます。

メンテナンス性を高められる

ネストによる記述、変数の利用、ミックスイン機能など、Sassが内包するポイントを上手く活用することで、作業効率の向上が図れるというのはお分かりになったかと思います。
加えて、特筆すべきメリットとして、メンテナンス性を高められることが挙げられます。

メンテナンス性は保守性とも呼ばれ、理解しやすいプログラムやバグの発見に一役買ってくれます。容易に修正できるプログラムが、いわゆるメンテナンス性が高いと言われるものです。
メンテナンス性が重要視される理由として、プログラマーとメンテナンス担当が異なるケースの多さが、頻繁に取り上げられています。例えば、クラウドソーシングサービスにはWebサイトの保守・管理という案件があります。この場合、他の誰かが作成したWebサイトをメンテナンスすることになるため、プログラムを作った本人しか理解できない・修正できないものであれば問題となるのです。

Sassはネストやミックスイン機能によりコードの記述量が減らせるので、プログラムが読みやすくなっています。
また、変数を活用すれば修正作業を効率的に行えるため、メンテナンスに便利です。

Sassの導入と使い方について

Sassを使うためには、幾つかプログラムをインストールしておく必要があります。
ここでは導入にあたって必須とされるプログラミング言語と手順を紹介・説明します。

Rubyのインストール

まずインストールするのはRubyというプログラミング言語です。パソコンのOSやバージョンによっては、標準でRubyがインストールされている場合もあります。Rubyがインストールされているかどうかは、コマンドプロンプトを開き「ruby -v」と入力すれば確認可能です。
なお、インストールされていれば、バージョンが表示されます。逆にインストールされていない場合は「ruby は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と出てきます。後者であれば、Rubyの配布サイトからダウンロード＆セットアップを推奨します。
一応伝えておくと、Rubyのインストールこそ必須ではありますが、Rubyのコードを書くこと自体はないため、プログラミング初心者の方でも安心してください。

Sassのインストール

Rubyのインストールを終えたら次はいよいよSassです。Macならターミナルを、Windowsならコマンドプロンプトを開き「gem install sass」と入力すればSassをインストールできます。完了したら「sass -v」入力して、Rubyの時と同じくバージョンを表示させます。正常にインストールできていれば、この時点でSass導入のための道具は揃ったといっていいでしょう。
しかし、これだけではまだSassは使えません。

コンパイル

既に述べたようにSassは単体では使用できないので、CSSに変換して使用します。なお、特定のプログラミング言語で記述されたコードを、他の言語に変換することをコンパイルと言います。加えて、変換作業を行うソフトウェアはコンパイラと呼ばれます。
CSSへのコンパイル方法はコマンドプロンプトやターミナルで「sass style.scss:style.css」という命令を実行するやり方と、コンパイラを使って対応する2種類です。どちらの手段でも問題はありませんが、コマンド（ターミナル）の操作に慣れていない方は、コンパイラの使用をおすすめします。

ちなみに、コンパイラを使用する際の、Sassを使う時の手順は以下の通りです。

まず、Sass用のフォルダを作り、その中にstyle.scssというファイルを作成します。
次にコンパイラを起動して、style.scssとコンパイラを関連付けます。
※コンパイラによって関連付けの方法は異なりますが、Sass用のフォルダをコンパイラにドラッグ＆ドロップすれば関連付けされる場合が多いです。
関連付けさせた状態でstyle.scssにコードを記述し保存すれば、コンパイル完了。
これにより、Sass用のフォルダ内にstyle.cssのファイルが出来上がることとなります。

Sassが求められている理由

Sassの導入方法について説明しましたが、懸念点としても、少なからず手間がかかることが分かります。しかしながらSassが求められている背景・理由があるのも事実です。
再三お伝えしている通り、SassはCSSを効率的に記述するための言語とあって、パフォーマンスに大きく関わります。
確かにCSSは、普及させることを目的にプログラミング入門者でも分かりやすい書式となっています。セレクタやプロパティなど覚えることこそあるものの、基本的にはセレクタ（pやh1など）を指定し、プロパティと値を中括弧で閉じるというパターンを繰り返すシンプルなものです。この構造はCSSの強みであり、それゆえ十分にも思えますが、一方で難易度の高い記述ができないというデメリットもあります。

スマートフォンやタブレットの普及に伴い、マルチデバイスに対応できるレスポンシブWebデザインのサイトが増えました。さらにディスプレイの高解像度化によりデバイスピクセルとCSSピクセルの二つの概念への意識も今や必須です。
要するに、環境の変化とともにWebサイトのデザインや機能は高度化し、CSSに求められる要件が格段に上がってきたといえます。こうした背景もありCSSの機能を拡張するSassをはじめとするメタ言語は生まれました。
補足ですが、Sass以外にもLESSやStylusなどCSSのメタ言語は存在します。
その中でもSassはユーザー数と合わせて精通する方も多いです。つまり、トラブル時に相談できたり、Web上で解決策を検索しやすかったりします。
となれば、状況に応じて使わない手は無いはずです。

Sassを導入する上での注意点

複数人でCSSを保守・管理する場合、全員がSassを導入していないと作業効率が悪くなります。まさに共通言語に齟齬があっては、スムーズに先へと進まない可能性がでてくるでしょう。
また、開発環境が異なると、コンパイルの結果も変わる場合があります。ゆえにチームプロジェクトに対し、各個人が導入する際は、「コンパイラを同じものにする」「設定を統一させる」など事前にしっかりと準備・確認することが肝心です。

大規模サイトで作業の効率化を図るなら、ぜひおすすめ！

ここまでSassの意味やメリット、使い方など基本的なポイントを紹介してきました。
一連の流れで述べてきた通り、Sassの導入で、コードの記述量を減らすことが可能となり、作業効率とメンテナンス性の向上が期待できます。
導入に多少の手間こそかかりますが、使いこなせれば確実に生産性は向上するものと考えます。特にコードの記述量が増えがちな規模の大きいWebサイトを制作する方におすすめです。

Sassに対して漠然と気になっていた方や興味を持たれていた方にとって、拙稿が参考もしくは導入のきっかけになるとすれば、とてもありがたく思います。
機会があれば、ぜひご検討してみてください。