- Sassとは
- Sassの記法「SASS」と「SCSS」
- Sassの主な機能
- Sassを利用するメリットとデメリット
- Sassを使用する方法
- Sass案件の年収と将来性
- Sassに関するよくある質問
- まとめ
Sassとは
SassはSyntactically Awesome Style Sheetsの略語で、CSSを拡張して扱いやすくしたメタ言語です。メタ言語とは言語を書くための言語であり、拡張言語とも呼ばれています。有名なメタ言語にはXMLやSGMLがあります。
メタ言語単体は具体的な使用に関する目的を持っていませんが、メタ言語を活用することでより効率的な記述が可能です。そのためSassは、新しいプログラミング言語というよりも、CSSを効率的に書くための言語といえるでしょう。
関連記事：CSSの勉強方法は？HTMLとの関係とおすすめ学習サイト・本
Sassの歴史
近年では、マルチデバイスの対応、Retinaディスプレイなどの高解像度ディスプレイへの対応、CSS3などCSSに求められる要件が上がっています。そうした状況のなか、CSSの仕様に機能が追加されたとしても、ブラウザの実装が進んで実用レベルに達するまでには相当な年月がかかってしまいます。
Sassの開発者であるハンプトン・カトリン氏とネイサン・ワイゼンバウム氏は、CSSの使用策定とブラウザ実装を待つのではなく、サーバーやローカル環境で動作するプログラムによって既存のCSSの仕様に合うように変換すればよいことに気づき、Sassの開発に着手しました。そしてSASS記法のSassが2006年に公開されました。
しかし、SASS記法はCSSとの互換性がないため、プログラムに触れない人たちにとってはハードルが高い存在でした。そこで、Sass3.0より、CSSの記法に似せたSassy CSS（SCSS）が導入されたのです。SCSSはCSSと完全に互換性があり、Sassの導入が容易になったことで利用者が増えました。現在ではSCSS記法が主流となっています。
Sassの役割
SassはCSSをより効率的に記述できる言語です。また、CSSの管理しづらい問題を解決します。ファイルの確認や修正をする際に、スタイルシートをわかりやすく分割して管理できるため、目的のファイルを見つけやすくなります。
CSSとの違い
CSSとSassは、どちらもWebページの文字の大きさや色を設定する言語ですが、いくつかの違いがあります。CSSは、コーディングを進めていくと肥大化して複雑になり、メンテナンスが難しくなる点が特徴です。一方でSassは、メンテナンスしやすく書式も簡素化できるため、コード記述量が少なくて済みます。
Sassの記法「SASS」と「SCSS」
SassにはSASS記法とSCSS記法があります。最初に作られたのがSASS記法で拡張子が「sass」、あとから作られたのがSCSSで拡張子は「scss」です。
SASS記法は非常に簡素化された記法で、セレクタの後の波括弧の代わりにインデントで書き、値の後のセミコロンは省略できます。しかし、通常のCSSと互換性がなく書式も異なるため、普及には至りませんでした。そこで、CSSとの互換性を高めるために作られたのがSCSS記法です。
それぞれを見比べてみましょう。
CSS
ul{
margin: 0 0 1em;
}
ul li{
margin-bottom: 10px
}
上記のCSSをSASS記法とSCSS記法で書いた場合、次のようになります。
| SASS記法のSass | SCSS記法のSass |
|---|---|
| Ul margin: 0 0 1em li margin-bottom: 10px |
ul { margin: 0 0 1em; li { margin-bottom: 10px; } } |
見比べてみると、SASS記法は記述量が少なく、簡素化されていることがわかります。しかし、インデントの深さと改行の位置に細かい制約があり、CSSの書式で記述するとエラーになります。
SCSS記法ではネストを使って書いているため書式は異なりますが、CSSと同じ書式で記述しても問題ありません。現在では、Sassを使用する場合はCSSとの互換性があるSCSS記法を用いるのが一般的です。
Sassの主な機能
Sassの機能は多数ありますが、特にCSSよりも便利な機能は下記のとおりです。
-
・ネスト（入れ子構造）での記述簡略化
・変数が利用できる
・ミックスイン（@mixin）が利用できる
・ファイル分割が可能
CSSと比較すると手間も多いですが便利な部分も多いです。ここではSassの具体的な機能を把握し、今後CSSとの役割分担、選択を考える参考にしてください。
ネスト（入れ子構造）での記述簡略化
親子関係にあるセレクタをネストして記述できます。Sassのネストを使用することで、まとめてスタイルを記述できるため、コードの記述量が減るだけではなく、親子関係もわかりやすくなります。
| .css | .scss |
|---|---|
| test { margin-bottom: 10px; } test h1 { font-size: 12px; } test p { margin-bottom: 10px; } test a { color: blue; } test a:hover { opacity: 0.2; } |
test { margin-bottom: 10px; h1 { font-size: 12px; } } p { margin-bottom: 10px; } a { color: blue; &:hover { opacity: 0.2; } } |
変数が利用できる
よく使用するサイトのメインカラーやサブカラー、サイトのコンテナ幅を変数にしておくことで、繰り返し同じ記述で利用できます。修正が発生した際も最小限の修正で済むため、影響範囲が大きいものは変数にしておくことがおすすめです。
| .css | .scss |
|---|---|
| test { background-color: red; margin-bottom: 10px; } test h1 { background-color: gray; font-size: 12px; } test p { margin-bottom: 10px; } test a { color: blue; } test a:hover { opacity: 0.2; } |
// カラー変数 $main-color: red; $sub-color: gray; $link-color: blue; // 使用例 test { background-color:$main-color; margin-bottom: 10px; h1 { background-color:$sub-color; font-size: 12px; } } p { margin-bottom: 10px; } a { color: $link-color;; &:hover { opacity: 0.2; } } |
ミックスイン（@mixin）が利用できる
ミックスインは、定義したCSSのスタイルを別の箇所でも使用できるようにする機能です。「サイトで使用するボタンのスタイルを別のページで使用したい、かつ、ここでは色だけ変えたい」という場合、ボタン自体のレイアウトに関する記述も必要になるため、コード記述量が増えてしまいます。
ミックスインを使用すれば、スタイルの箇所はミックスインで定義したスタイルを呼び出し、新規に色のスタイルを記述するだけで済みます。同一のスタイルを複数で使用する際に役立つ機能です。
ファイル分割が可能
Sassでは、下記のようにファイル分割ができます。
-
・_header.scss
・_body.scss
・_footer.scss
・_sidebar.scss
分割することで、ファイル管理がしやすくなります。上記の状態でヘッダーの記述を修正する際は、_header.scssを検索して修正が可能です。ファイルはそれぞれ分割されていますが、最終的には1つのスタイルシートにまとめられます。
なお、上記の例では構造ごとにファイル分けをしていますが、実際は機能別やカラー別、レイアウト別のファイルに分けて使用することが多いでしょう。
Sassを利用するメリットとデメリット
Sassを利用するメリットとデメリットは下記のとおりです。
| メリット | デメリット |
|---|---|
| ・開発効率の向上 ・メンテナンス性を高められる |
・コンパイルの手間がある ・すべての現場で使用できるわけではない ・ファイル数が増えがち ・ネスト構造が深くなってしまう |
メリットとデメリットを比較すると一長一短ですが、結果的にどちらを採用すべきかは開発状況やプロジェクト方針によって異なります。それぞれについて、詳しく見ていきましょう。
メリット
SassではCSSよりも記述を簡素化できることや、ファイルを分割できることから、開発効率やメンテナンス性を高められるメリットがあります。
開発効率の向上
CSSに比べて、コードの記述量が圧倒的に少なくなるため、コーディングが楽になり、開発効率の向上につながります。複雑なコードも1つにまとめておくことができ、再利用する際も簡単に呼び出せます。
上記のようにコーディングの利便性が上がれば人間の作業が減り、ヒューマンエラーやバグを減らすことにもつながります。
メンテナンス性を高められる
Sassでは、よく使用するサイトのメインカラーやサブカラー、サイトのコンテナ幅を変数にできます。そのため、メインカラーを赤から黄に変更したい場合も、変数の1箇所を変更するだけで修正が可能です。CSSでは、修正箇所をすべ変更しなければなりません。Sassで記述することで、修正に強くなり、メンテナンス性を高められます。
デメリット
SassはあくまでもCSSを拡張した言語であるため、コンパイルの手間がある点がデメリットです。また、すべての現場で使用できるわけではありません。
コンパイルの手間がある
Sassで記述したファイルは、拡張子が「.sass」です。このままではHTMLファイルが読み込めないため、コンパイルして.cssファイルを作成する必要があります。コンパイル自体に時間はかかりませんが、コンパイルエラーが発生する場合があります。エラーが起こると、原因の特定に多くの時間がかかってしまうでしょう。
すべての現場で使用できるわけではない
コンパイルの手間があるSassですが、それ以上に便利な言語であるため、使用し始めると手放せなくなる方は多いでしょう。しかし、Sassを使用できないケースもあるため注意が必要です。クライアントの希望によって、CSSを使用して開発しなければならない場合があります。Sassを使用できない事態に備えて、CSSも使用できるようにしておくとよいでしょう。
ファイル数が増えがち
Sassはファイルを分けることで管理しやすくなり開発の利便性を向上させますが、その一方でファイルが増えるというデメリットにもつながります。ファイルが増えても容量的にはそこまで問題ありませんが、かえって管理しにくくなるかもしれないのでその点はデメリットです。
ネスト構造が深くなってしまう
ネスト構造が深くなると読み込みに時間がかかり、また改行ルールなどを守って記述しないと可読性が悪くなるでしょう。ただし他のプログラミング言語経験があればSassのネスト構造はそれほど深くはないので、CSSほどべた書きのイメージではないというだけです。
Sassを使用する方法
Sassを使用する方法を3つ紹介します。
-
・RubyとSass、コンパイラをインストールする
・Gulpを使う
・SassMeisterを使う
本格的にSaasを使用する場合、最終的にはコンパイラをインストールして環境構築することになりますが、まずはお試しで別の方法でSassを使用してみることが可能です。
RubyとSass、コンパイラをインストールする
Sassと共に、RubyやSassからCSSへの変換を円滑に行うコンパイラをインストールする方法です。
まず、Rubyを配布サイトからダウンロードします。PC環境によってダウンロードするファイルが異なるため、使用するPCにあわせて確認してください。
次にSassをインストールします。Macはターミナルを使用し、WindowsはRubyGemsシステムを使用します。コマンドプロンプトから「gem install sass」を実行し、Sassをインストールしましょう。
最後に、コンパイルが必要です。手動で「sass style.scss:style.css」というコマンドを実行する方法と、「sass --watch style.scss:style.css」というコマンドによって自動的にコンパイルするように設定する方法があります。
Gulpを使う
Gulpは、Node.jsのライブラリの一つです。タスクランナーの一1つで、SassをCSSに変換する以外にも、ファイルの圧縮ができます。
SassMeisterを使う
Sassをまず試してみたい場合は、SassMeisterというオンラインツールが便利です。右側でCSSに変換したものを見ながら、左側にSassを記述できます。
Sass案件の年収と将来性
CSSはホームページの制作に欠かせません。SassはCSSの弱点を克服して、より効率的に開発できるように作られた言語です。ホームページの制作にCSSが使用される以上、Sassは今後もさまざまな場面で活躍するでしょう。
また、レバテックキャリアによると、Sass案件の上位10件の平均年収は630万円です。対して、CSSを扱う案件の平均年収は550万円です（※2024年6月現在）。CSSと比べるとSassは需要が高く、高い年収が期待できるでしょう。
Sassに関するよくある質問
Sassに関するよくある質問と回答を紹介します。SassはCSSと比較すると認知度が低く、長年CSSを扱っているもののSassは知らないといった人も多いでしょう。しかし開発内容によってはSassを導入した方が生産性が上がったりバグを防げたりするので、Sassについて把握しておいた方が良いです。
Q1. Sassとは何ですか？
SassはSyntactically Awesome StyleSheetの略です。CSSを拡張して書きやすさや見やすさを強化したスタイルシートです。CSSの弱点を補強してより使いやすくする目的で作られたものですが、CSSと比較すると拡張したがゆえのデメリットもあります。
Q2. SASSとSCSSの違いは何ですか？
SassにはSASSとSCSSの2種類があります。まずそれぞれファイルの拡張子が.sassと.scssで異なります。記述方法は、SASSの方が少し省略されています。記述が省略されていないためCSSとの互換性はSCSSの方が高いです。
Q3. Sassのメリットを教えてください
Sassのメリットは記述が簡単でコーディングしやすいことです。変数やif文や四則演算を使えるので、他のプログラミング言語に慣れていて、なおかつCSSを扱える人であればSassは手軽に使えて便利な機能です。
まとめ
SassはCSSを拡張したスタイルシートです。CSSは使っているけれどSassは触れたことがない人も多いかもしれません。しかし土台はCSSなので、CSSが扱えれば少し書き方が異なるだけです。変数やif文の概念があるのでCSSにはない機能がありますが、JavaScriptなど他のプログラミング言語の経験が少しあれば簡単に扱える範囲です。
プロジェクトによってはSassを使用しているので、CSSの勉強をするついでにSassにも慣れておくのがおすすめです。Sassを扱ったことがなくても、CSSの経験があればSassにもすぐに対応できるでしょう。
ITエンジニアの転職ならレバテックキャリア
レバテックキャリアはIT・Web業界のエンジニア職を専門とする転職エージェントです。最新の技術情報や業界動向に精通しており、現状は転職のご意思がない場合でも、ご相談いただければ客観的な市場価値や市場動向をお伝えし、あなたの「選択肢」を広げるお手伝いをいたします。
「将来に向けた漠然とした不安がある」「特定のエンジニア職に興味がある」など、ご自身のキャリアに何らかの悩みを抱えている方は、ぜひ無料のオンライン個別相談会にお申し込みください。業界知識が豊富なキャリアアドバイザーが、一対一でさまざまなご質問に対応させていただきます。
「個別相談会」に申し込む
転職支援サービスに申し込む
※転職活動を強制することはございません。
レバテックキャリアのサービスについて
