コラム【WEB編】

Ｓａｓｓとは？

Ｓａｓｓとはハンプトンキャトリン氏が設計しネイサンバイゼンバウム氏が開発した「ＣＳＳのメタ言語」です。

メタ言語とは「ある言語について何らかの記述をするための言語」で、Ｓａｓｓは「ＣＳＳに対し機能を拡張した言語」ということになります。

ＣＳＳを入れ子（階層構造）で記述したり、変数を使うことができるＣＳＳを拡張した機能です。

Ｓｙｎｔａｃｔｉｃａｌｌｙ　Ａｗｅｓｏｍｅ　ＳｔｙｌｅＳｈｅｅｔの略語で、文法的に素晴らしいスタイルシートという意味です。

Ｓｙｎｔａｃｔｉｃａｌｌｙ　＝　構文的に
Ａｗｅｓｏｍｅ　＝　素晴らしい
ＳｔｙｌｅＳｈｅｅｔ　＝　スタイルシート

ＣＳＳをとても使いやすくして自由度を高くしたものがＳＡＳＳという認識となります。

ただし、ブラウザはＳＡＳＳ自体を読み込むことはできないため、プロジェクトの中でＳＡＳＳのファイルをＣＳＳファイルにコンパイルする必要があります。

さらにＳａｓｓはＣＳＳのメタ言語というもので、簡単に言うと「ＣＳＳをさらに拡張して、より効率的に書けるようにした」ということです。

ＣＳＳとの違い

ＳａｓｓはＣＳＳのメタ言語で「ＣＳＳに対し機能を拡張した言語」となります。

通常のＣＳＳでも問題なく作業をすることは出来ますが、その量が膨大になっていくと大変になってきます。

また修正があった際に１つひとつ修正する必要があり、手間が掛かってしまいます。

Ｓａｓｓを用いれば、通常の記述を少なくしたり、修正があった際にもＣＳＳよりも修正範囲を少なくすることも可能です。

このようにＣＳＳの弱点を補い、より機能を充実させたものがＳａｓｓとなります。

ＳａｓｓとＳＣＳＳの違い

Ｓａｓｓには２つの表記方法があり、「ＳＡＳＳ記法」と「ＳＣＳＳ記法」があります。

最初は「ＳＡＳＳ記法」が用いられていましたが、通常のＣＳＳの書き方を非常に簡略化して書かれており、そのためＣＳＳの書き方と異なり分かりづらいためあまり普及しませんでした。

その後にＣＳＳの書き方に近い「ＳＣＳＳ記法」が作られ、それが広く普及して今に至ります。

そのため、Ｓａｓｓと呼ばれていますが　ファイルの拡張子は「．ｓｃｓｓ」　となっています。

この辺りが少しややこしいので、注意が必要です。

Ｓａｓｓの書き方

Ｓａｓｓには「ＳＡＳＳ記法」と「ＳＣＳＳ記法」という２種類の書き方があるため、ファイルの拡張子もそれぞれ「◯◯．ｓａｓｓ」、「◯◯．ｓｃｓｓ」となります。

ＳＡＳＳ記法ではＣＳＳで使用する「｛｝」がありません。

代わりにインデントを使います。

またプロパティの後の「；」もなくかなり下記のようなシンプルなコードになっています。

ＳＣＳＳ記法は「｛｝」もあり、プロパティの後の「；」もあります。

ＳＣＳＳ記法ではＣＳＳと互換性があり、通常通りのＣＳＳを書いてもコンパイルエラーにはなりません。

ほとんどＣＳＳと同じ記述になっていてわかりやすいため、現在ではＳａｓｓといえばＳＣＳＳ記法が主に使われています。

Ｓａｓｓのメリット

ここからは、Ｓａｓｓを使用する事でのメリットについてご説明します。

作業効率がアップ

・セレクタやプロパティのネストで記述量が減る
・一度定義したスタイルのセットを簡単に呼び出せる
・複雑なコードも再利用できる

例として、サイトで何度も出てくるコンテンツのスタイルセットがあって、それを別のセレクタの中で呼び出して文字色だけ変える、なんてことも簡単にできます。

ＣＳＳに比べ、コードの記述量が圧倒的に少なくなるので、コーディングが非常に楽になります。

また、複雑なコードでも１つにまとめておき、後で再利用することも簡単に呼び出せるため、一度Ｓａｓｓを使うと元のＣＳＳベタ書きには戻れなくなります。

メンテナンス性のアップ

・変数で値を使いまわすことができる
・四則演算ができる
・関数が使える

例として、メインカラーやサブカラー、コンテンツの幅など、よく使うものを変数にしておくことで、たった１箇所の変数を書き換えれば、同じ変数を使っている部分の修正が全て済んでしまいます。

そのため、もし、あとから「メインカラーを赤からオレンジに変更したい」となっても変数の１箇所を変更するだけで修正が出来てしまいます。

ＣＳＳでは、修正箇所を全て変更しなければならなくなるため、Ｓａｓｓで記述することはそういったあとからの修正にも強くメンテナンス性が向上します。

Ｓａｓｓのデメリット

とても便利なＳａｓｓですがデメリットもあります。

Ｓａｓｓの環境の準備に時間がかかる

ＳａｓｓファイルはそのままではＣＳＳとしてブラウザが認識できるものではありません。「

コンパイル」という作業をして、ＣＳＳに変換してあげる必要があります。

そのために必要なツールをインストールしないとならないのが難点です。

これが面倒で導入しない方も多いです。

Ｓａｓｓを利用している人ばかりではない

例えば公開まではこちらで作業をして、公開以降はクライアントでメンテをしていくなんて場合も多いでしょう。

逆もあり、クライアントの既存サイトを修正していくこともあります。

そんな場合、クライアント側がＳａｓｓを導入していなければＣＳＳを編集していくことになり、Ｓａｓｓは使えなくなってしまいます。

こちらも諦める前に運用方法でカバーできることもあります。

クライアント用に修正用のＣＳＳを用意して、修正のスタイルはそちらに書いていってもらうことでＳａｓｓが使えなくなってしまうことを防ぐことができます。

Ｓａｓｓの主な機能

Ｓａｓｓには機能が多数ありますが、Ｓａｓｓを使用していて「便利」と感じているものを紹介していきます。

入れ子構造(ネスト)での記述簡略化

Ｓａｓｓは、親子関係にあるセレクタを入れ子構造（ネスト）にして記述することができます。

ＣＳＳでは、親の要素から対象の要素までのセレクタを全て何度も書く必要があります。

以下のように必然的にコードの記述量が増えてしまいます。

Ｓａｓｓでは、ネストを使うことでまとめてスタイルを記述することが可能なので、コードの記述量が減るだけでなく、下記のように親子関係もわかりやすくなります。

もし「ｓｅｃｔｉｏｎ」を「．ａｂｃ」に変更したい時には、１行目の「ｓｅｃｔｉｏｎ」を「．ａｂｃ」に修正するだけなので、修正工数の大幅な削減ができます。

変数の利用が可能になる

Ｓａｓｓは、変数を利用することができます。

よく使うサイトのメインカラーやサブカラー、サイトのコンテナ幅等を変数にしておくことで、何度も繰り返し同じ記述で利用することができます。

また、修正があっても変数にしておくことで最小限の修正量で作業が済むので、影響範囲が大きいものは変数にしておけば便利です。

ミックスイン（ｍｉｘｉｎ）が利用できる

Ｓａｓｓは、ミックスイン（ｍｉｘｉｎ）を利用することができます。

ミックスイン（ｍｉｘｉｎ）は、定義したＣＳＳのスタイルを別のところでも使えるようにする機能となります。

例えばサイトで使用するボタンのスタイルを別ページで使用するため色だけ変えたい。

という場面が出てきます。

しかし、色が違うだけですがボタン自体のレイアウトに関する記述もしなければならないため、下記のようにコード量が増えてしまいます。

ミックスイン（ｍｉｘｉｎ）を用いれば、スタイルの箇所はミックスイン（ｍｉｘｉｎ）で定義したスタイルを呼び出し、新たに色のスタイルを記述する。だけで済むようになります。

ファイルを分割し管理がしやすい

Ｓａｓｓは、ファイルを分割し管理をしやすくすることができます。

ファイルを以下のようにそれぞれのまとまりで分割するとします。

・＿ｈｅａｄｅｒ．ｓｃｓｓ
・＿ｂｏｄｙ．ｓｃｓｓ
・＿ｆｏｏｔｅｒ．ｓｃｓｓ
・＿ｓｉｄｅｂａｒ．ｓｃｓｓ

上記のようにすると、ヘッダーの記述を修正する時は「＿ｈｅａｄｅｒ．ｓｃｓｓ」を修正すれば良くなるので、該当箇所を見つけやすく管理がしやすくなります。

ファイル自体はそれぞれ分割されていますが、最終的に１つのスタイルシートにまとめることができます。

Ｓａｓｓの環境準備

Ｓａｓｓを使用するには準備が必要となります。

Ｓａｓｓのインストール

Ｓａｓｓファイルをコンパイルするためには、専用のツールをインストールすることが必要になります。

Ｓａｓｓツールは

・ＣＵＩ　環境（コマンドプロンプト等）で動作するもの
・ＧＵＩ　環境（ツールバー等）で動作するもの

の２タイプがあります。

使用するＯＳ　（Ｗｉｎｄｏｗｓ／Ｍａｃ　ＯＳ／Ｌｉｎｕｘ）　によってインストール方法も違うので注意が必要です。

Ｓａｓｓ公式サイトのダウンロードページか、他のインストール方法紹介ページを読んで、自分の環境に応じてインストールしてください。

Ｓａｓｓファイルの変換方法 (コンパイル)

Ｓａｓｓを使うには、Ｓａｓｓ自体を編集する「エディタ」と、コンパイルしてＣＳＳを吐き出すための「コンパイラ」が必要となります。

Ｍａｃユーザーはデフォルトで「Ｒｕｄｙ」が入っているので、「Ｂｒａｃｋｅｔｓ」などのエディタであれば、Ｓａｓｓを保存しただけで自動でＣＳＳをコンパイルしてくれるので、コンパイラは不要な場合が多いです。

Ｗｉｎユーザーは「Ｒｕｄｙ」のインストールが必要でちょっと面倒なんですが、ＧＵＩコンパイラをインストールすれば「Ｒｕｄｙ」のインストールは必要なく簡単にコンパイルできます。

ＧＵＩコンパイラは面倒なコンパイルを簡単にやってくれるアプリです。こちらもフリーで使えるメジャーなものは下記になります。

・ｋｏａｌａ
・ｐｒｅｐｒｏｓ

エディタ

代表的なフリーのエディタは下記です。

・Ｂｒａｃｋｅｔｓ
・Ｓｕｂｌｉｍｅ　Ｔｅｘｔ
・Ｖｉｓｕａｌ　Ｓｔｕｄｉｏ　Ｃｏｄｅ
・Ａｔｏｍ

人それぞれで相性もありますので、使いやすいものを使いましょう。

最後に

今回、Ｓａｓｓについてご説明させていただきました。

Ｓａｓｓを使うと元のＣＳＳには戻れないほど、Ｓａｓｓが便利だと感じる方も多いとおもいます。

Ｓａｓｓという技術を一言で表現するのであれば、「ＣＳＳにプログラミング要素を付加するもの」ということができるでしょう。

ＣＳＳ３によって可能なことが広がり、ますますＷｅｂ技術における重要性が増してきたＣＳＳ。

Ｓａｓｓを導入してＣＳＳのより良い開発環境を構築することは、これからのＷｅｂ開発者にとって大変有意義なことであるといえます。

コーディングで作業効率が爆上がりになりますので、是非、この機会に使用してみてください！