クリエイターがデザイン業務に集中するためには、その他の作業効率化が欠かせません。Web制作においてCSSの記述は、サイトの規模が大きくなるほど複雑になり、記述にかかる時間が長くなる傾向があります。しかし、Sassを導入することで、CSSを直接記述する場合と比べて作業効率やメンテナンス性を大きく向上させることが可能です。この記事では、Sassの基本的な特徴や導入手順、制作業務を助けるさまざまな機能について紹介します。

Sassの基本的な特徴

Sassの必要性を理解するためには、Sassがどのようなものなのかを理解することが必要です。ここでは、Sassの基本的な特徴や導入するメリットについて解説します。

SassはCSSのメタ言語

Sassは「Syntactically Awesome StyleSheet」の略で、CSSをより簡便に記述するために作られたメタ言語です。プログラミングの記述方法を取り入れることで、CSSよりもコーディング作業を短時間で行うことができるため、作業効率が向上します。加えて、可読性が高く、メンテナンスやエラーチェックが容易になることも利点です。

Sassでは、コードを記述するだけでなく、CSSとして変換して出力するために「コンパイル」という処理を必要とします。Sassの種類や利用環境によって、コンパイルの処理速度に違いがあることに注意が必要ですが、慣れてしまえば気になることはあまりありません。

CSSコーディングの問題点とSassを導入するメリット

Sassを導入すると、CSSのコーディングにおいて発生するさまざまな問題を解決することができます。たとえば、CSSのコーディングでは作業者個人の記述の癖が出やすく、コーディングルールの作成や徹底がコーダーやディレクターの負担になりがちです。また、チームで制作を行っていると、それぞれの記述方法の違いから思ったような表示にならない場合もあります。また、HTMLの構造が複雑で、ある要素をデザインしようと思ったときに多くの継承が必要となり、コードのコピーや新規のスタイル作成が都度行われることも多いです。似たようなスタイルを使いまわしていると、一部だけを変更したい場合に他への影響を考慮する必要があったり、煩雑な記述を必要としたりと、面倒な作業が増えることも少なくありません。

CSSコーディングで起こるこうした問題の多くが、Sassの導入によって解決できます。Sassはコードの記述量を削減し、かつコードの可読性を高めてくれる仕組みを持っています。そして、コンパイルされたCSSは共通のルールに基づいて出力されるため、個人の癖が出ることもありません。そのため、Sassを使えばCSSコーディングにおける、コーディング作業やメンテナンス作業の効率がずっと高まります。

導入するための流れ

Sassの導入は専用のツールが提供されているため、初心者やITが苦手な人でも大丈夫です。以下で、Sassの導入手順やポイントについて具体的に紹介します。

手軽に作業環境を整えることができる

Sassの導入といっても、スタイルを定義するために特別な環境は必要ありません。Sassの記法に従ってコードを記述したファイルを「.scss」または「.sass」という拡張子で保存するだけです。しかし、HTMLファイルから直接これらの拡張子のファイルを読み込むことはできないため、コンパイルという処理を行って一般的なCSSファイルの形に変換する必要があり、そのための作業環境を準備する必要があります。

コンパイルを自力で行うのは専門的な知識が必要ですが「Visual Studio Code（VS Code）」や「Preprops」といったツールを使えば、初心者でも簡単にコンパイルを行うための環境を設定可能です。これらのツールは、GUIでさまざまな設定を行うことができるため使いやすく、Sassファイルの保存時に自動的にコンパイルするなど便利な機能を多く有しています。インターネット接続ができる環境であれば、無料で入手できるのもメリットです。

VS Codeを利用する方法

Sassを導入するにあたって、最も手軽で簡単な方法のひとつがVS Codeを利用する方法です。この方法では「VS Code」だけでなくSass用の拡張機能をインストールする必要がありますが、特別な知識や難しい操作は必要ありません。VS Codeは、Microsoftが提供しているプログラミング用のエディタで、公式サイトから無料でダウンロードすることができ、Mac・Windowsの両方に対応しています。

インストールは、公式サイトからインストーラをダウンロードして実行するだけです。ウインドウで指示される手順に従って進めていけば、問題なくインストールすることができるでしょう。

Live Sass Compilerを利用する方法

VS Codeのインストールが終わったら、Sassをコンパイルするための拡張機能をインストールします。Sassをコンパイルするための拡張機能は数多くありますが、そのなかでも「Live Sass Compiler」は無料で使いやすいため特におすすめです。

Live Sass Compilerのインストールは、VS Codeを開き、画面左下の拡張機能のアイコンをクリックして拡張機能のメニューを表示します。そのなかに、拡張機能を検索するための検索ボックスがありますので、そこに「Live Sass Compiler」と入力してください。すると、検索結果にLive Sass Compilerが表示されます。選択して、インストールのボタンをクリックするとVS Codeに拡張機能がダウンロードされ、自動的に追加されます。

Live Sass Compilerをインストールすると、画面下に「Watch Sass」というボタンが追加されるので、そのボタンをクリックします。その後は、Sassファイルを更新すると自動的にCSSファイルが作成・編集が行われます。

SCSSとSassの違い

Sassには大きく分けて「SCSS」と「Sass」の2つの記述法があり、保存するファイルもその記述スタイルに合わせて「.scss」または「.sass」の拡張子で保存します。SCSSとSassでは使用できる機能に違いはなく、どちらが便利かと比較することにはあまり意味がありません。個人のスキルや感覚的な記述のしやすさ、理解しやすさなどで、どちらが良いかを判断してください。

SCSSはCSSに似た記述法で、ネストの表現方法などがCSSと違います。CSSを普段から書き慣れている人にとってはSCSSが馴染みやすく、そのためSassではSCSS記法で記述するのが一般的になっています。一方のSass記法は、スタイルの適用されるブロックを示すための括弧や、文末を示すセミコロンがなく、ブロックはインデント、文末は改行で表現するため、慣れない人だと抵抗を感じる場合もあります。SassのほうがCSSやSCSSよりもコードの記述量は少なくなりますが、見やすいコーディングのためには記述に工夫が必要です。

もともと、SassとCSSとの親和性を高めるためにSCSSが開発されたという経緯があるため、基本的にはSCSSを使って記述するのがよいでしょう。

Sassを活用するためのさまざまな機能

Sassをうまく活用し業務の生産性を向上させるためには、そのさまざまな機能の使い方を知っておくことが必要です。以下、Sassの便利な機能について紹介します。

記述量を削減するネストの種類

CSSのコードの記述量が多くなる理由のひとつがセレクタです。スタイルを適用する範囲ごとに「div .main p」などとCSSでは記載しますが、Sassではこうしたスタイルはプログラムのコーディングのようにネスト（入れ子）の形で記述します。ネストの形で記載することによって、どの親要素のスタイルを継承しているかすぐに判断することが可能です。そのため、コードの可読性が高まってメンテナンス効率も高まります。

また、プロパティもCSSの記述量を増やす一因ですが、Sassではこれもネストでまとめることが可能になっています。たとえば「font-size: 24px; font-weight: 600; font-color: red;」というような記述なら「font: (size: 24px; weight: 600; color: red;)」といった具合です。こうしたネストを使った記述によって、プロパティが多くなれば多くなるほど、CSSよりも記述量が少なく済みます。

そして、ネストの中では親セレクタを「&」で示すことができます。たとえば「a:hover」「.item1.item2」なら、それぞれ「&:hover」「& .item2」という記述が可能です。CSSにコンパイルされる際、&がなければ親セレクタと子セレクタのあいだに半角スペースが作られますが、＆を入れると親セレクタと子セレクタのあいだにスペースは作られません。親セレクタの名前が長い場合などに便利です。

ネストとの注意点と変数を使う利点

Sassでは、ネストや変数を使うことによって作業を効率よく行うことができます。しかし、ネストはいくつも重ねてしまうと、コンパイル後のCSSのコードが複雑で重たくなってしまうため注意が必要です。また、何層にもネストされた形でコーディングしてしまうと、結局はコードの可視性が悪くなり、親セレクタがどのようなスタイルだったのかわからなくなってしまいます。そのため、Sassでネストを使う場合は階層があまり深くならないように注意が必要です。

また、Sassにおける大きなメリットのひとつが変数を使用できることです。ブロックの大きさやマージン、内部の余白、マウスオーバー時のスタイル、フォント情報など、利用頻度の高いスタイルを変数として保存しておくことで再利用が容易になります。また、変数を使用することによって、可読性が高まるほか、変数の定義を変更するだけで変更が変数の使用箇所すべてに適用されるため、変更に強いコードを書くことが可能です。複数人で作業する場合も、個人による記述方法の違いなどが出にくく、また共通のファイルとして読み込むことができるため作業が効率化します。

Sassを使うと、Sassファイルの内容に従って汎用のCSSコードが出力されます。そのため、ブラウザの種類やバージョンの違いによる変数の使用可否や、各スタイルの対応の有無を考える必要がなく、CSSの設計や作業の負担を大きく軽減することが可能です。

変数の使い方と代表的な変数

「変数」とは、ある名前に処理や設定を紐付けたものです。たとえば「a=りんご」ならaはりんごを意味します。変数を使うためには、最初に変数の定義を行うことが必要で、上記なら「a=りんご」が変数の定義です。Sassにおける変数は「＄」を先頭につけることによって変数であることを宣言します。「＄normal-color: #336699」なら、Sassファイル内で「font-color: ＄normal-color; background: ＄normal-color;」と記述することで、CSSファイルでは「font-color: #336699; background: #336699;」として出力可能です。また、「＄normal-color」の値を変更すると、フォントと背景の色の両方が一度に変更されます。

制作現場で変数がよく使われるものを紹介します。レスポンシブデザインのためのブレークポイント（メディアクエリ）は、一度設定しておくと数値を覚えておいて毎回打ち込む必要がなくなるため便利です。また、利用頻度の高いカラーコード、フォントファミリーなどを変数として宣言しておくと、作業効率やメンテナンス効率が高くなります。画像やブロック要素のサイズやマージンも、あらかじめ大中小とサイズ別に変数で用意しておくと便利です。

cssファイルをまとめることができる

Sassでは、CSSのように「@import」を利用し、別のファイルを読み込むことができます。そのため、ファイルを分割して作成することで、メンテナンス性を高めたり、別の制作案件で再利用したりすることが可能です。Sassを使うと、Sassファイルはたとえ分割されていても、ファイルの内容をもとにして、最終的に1つのCSSファイルにコンパイル処理されます。つまり、ブラウザが読み込む必要のあるCSSファイルをひとつにまとめることが可能です。

CSSの@importは便利な機能ではありますが、別のファイルの読み込みを指示し、実行するという仕組みから、HTTPリクエストが発生します。1つ2つのファイルであれば問題はありませんが、多くのファイルを読み込む場合、サーバーには負担です。Sassを使ってCSSファイルがひとつにまとめられることで、不要なHTTPリクエストの発生を抑えてサーバーの負荷を軽減するとともに、ブラウザでの表示を高速化させてユーザーに提供する価値を高めることができます。

ミックスイン機能で作業を効率化できる

Sassの便利な機能でぜひ覚えておきたいのが「ミックスイン」機能です。・Sassにおけるミックスインでは、単一、あるいは複数のスタイルをまとめてパッケージし、変数のように自由に呼び出して利用できます。スタイルシートをテンプレート化して使い回すことができるため、大規模なサイト開発で特に重宝する機能です。「@mixin（SCSS記法）」や「=（Sass記法）」で定義し、呼び出す際には「@include（SCSS記法）」または「+（Sass記法）」を使います。

変数では単一の値を扱いますが、ミックスインでは単一もしくは複数のスタイルを扱うという違いがあります。また、ミックスインは引数を取ることができ、デフォルトの値を追加したり、パラメータを指定したりすることも可能です。また、引数には変数を取ることもできるため、変更作業が大きく効率化できます。便利な機能ですが、引数の種類が多すぎると管理や修正が煩雑になりますので注意してください。