コラム

サイトを制作するときに使うCSS。
Web制作においてCSSの記述は、サイトの規模が大きくなるほど複雑になり、記述にかかる時間が長くなる傾向があります。
Sassには、CSSを拡張した言語で SASS と SCSS の2種類の記述方法があり、
「CSSコーディングの作業効率化」、「SSのメンテナンス・保守性の向上」のために設計・開発されました。
SASSやSCSSとは、具体的には『Sass』というCSSメタ言語のもとに利用する事ができる構文のことを言います。
今回は、この「SASS」と「SCSS」の違いやSassのメリット・デメリットを紹介していきます。

Sassとは

Sassは「Syntactically Awesome StyleSheet」の略です。
ハンプトン・キャトリン氏が設計し、ネイサン・バイゼンバウム氏が開発した、CSSのメタ言語になります。
Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。

SASSとSCSSとの違い

SassにはSASS記法とSCSS記法があり、書き方にも違いがあります。

SASS記法は、波括弧やコロン、セミコロン等が必要なく、効率的にコードを書けるものです。
SCSS記法は、従来のCSSとの互換性を持たせるために後から追加された記法で、通常のCSSが分かる人であれば問題なくコードが理解できるようになっていることもあり、現在ではSCSS記法が主流になっています。

拡張子はそれぞれ「.sass」、「.scss」になります。

CSSとの違い

SassはCSSを効率的に書けるように開発された言語です。
そのため、CSSよりもSassの方がコードを少なく記述することができ、CSSそのものよりもコードの保守管理がしやすくなります。
また、CSSにはないさまざまな機能を使用することができます。

メリット

ネスト（入れ子）が使え、構造が理解しやすい

Sassではネスト（入れ子）で書くことができるので、コードの可読性が向上します。
また、&を使うことでセレクタの親要素を取得することもできます。

四則演算ができる

Sassでは、JavaScriptのように四則演算ができます。
変数と組み合わせることで、より便利に使うことができます。

変数が使える

SassのSCSS記法では、$マークによって変数を指定することができます。

ファイルを分割できる

ファイルを分割し、インポートすることができます。
また、ファイルの冒頭に「_」と入れることで、そのファイルをパーシャル化（CSSとして書き出さない）することができます。

JavaScriptのように関数が使える

JavaScriptと同様に配列を操作するものや、for文、if文、色の三要素に関するもの等が使用できます。

Sassを使うデメリット

環境を整えるのが面倒

Sassを使うには、Rubyやコンパイラをインストールするか、もしくはGulpを導入する必要があります。

学習コストがかかる

CSSのメタ言語であるため、似た使用感となっているのでプログラミング言語をはじめから学ぶよりは学習コストがかからないでしょう。

完全にSassに開発が切り替わっていない

開発会社によってはCSSで開発している場合があり、Sassで開発していると修正などで別の会社が請負った場合、メンテナンスが困難になる可能性があります。

SassはCSSを拡張して、作業効率とメンテナンスの向上ができるメタ言語です。
Sassを導入にすることで、Webサイト制作およびメンテナンスを効率的に進められます。
紹介した機能の他にも、Sassには便利な機能がたくさんあります。興味がある方は、ぜひ調べて使ってみて下さい。