Aire Project Blog

1.Sassとは ー フロントエンドエンジニアのための「Sass」講座

【フロントエンドエンジニアのための「Sass」講座】では、Sassの基礎から応用までを網羅的に解説していきます。
ここでは、Sassとは何か、その概要と歴史、利用するメリットなどについて解説します。

Sassの概要

Sassは「Syntactically Awesome Stylesheets(シンタクティカリー・オーサム・スタイルシート)」の略で、「構造的にイケてるスタイルシート」という意味です。
サス」または「サース」と読みます。
CSSプリプロセッサー、またはメタ言語とも呼ばれます。

つまり、CSSを効率的に、便利に書くための言語で、このSassで記述したものをコンパイルしてCSSに変換します。
CSSの仕様を拡張して、変数や関数、条件分岐やループなど、プログラミング要素を付加したものになっています。

【参考リンク】 Sass: Syntactically Awesome Stylesheets

Sassが生まれた背景

もともとCSSは広く普及させることを目的として、プロパティと値の組み合わせだけで記述ができるように、シンプルな書式になっています。
そのため、プログラミングの知識がなくても、学びやすくなっています。

しかし、最近ではWebサイトもデザインや機能がリッチになり、大規模かつ複雑になってきています。
モバイル対応のために、レスポンシブデザインという実装方法が開発されていますし、ブラウザで実行するWebアプリケーションや、Webの技術を使ってスマホのネイティブアプリを作成することも増えています。
また、CSS3でCSSそのものも高機能化しています。

このような事情から、CSSにもコードを再利用や、コンポーネント化などプログラミング的な機能への要望が高まってきました。
しかし、CSSにそのような機能が追加され、各種ブラウザが新しい機能に対応し、実用レベルになるまでには時間がかかりすぎます。
そこで、そのようなCSSの弱点を補うために考えられたのが、新しいメタ言語を開発し、そのメタ言語で書いたものをサーバーやローカル環境でCSSに変換するという方法です。
そのようにして生まれたのが、Sassです。

Sassの歴史

Sassが初めて公開されたのは2006年のことでしたから、もうおよそ10年が経つことになります。
ハンプトン・キャリトンが設計し、ネイサン・バイゼンバウムが開発しました。

初期の頃は、HamlというHTMLをシンプルに書くことのできる、テンプレートエンジンとセットで開発されたため、インデントを使うSass記法で記述する仕様になっていました。
そのため、便利な機能が追加され、CSSがパワーアップしたと言われても、CSSとは記述方法が大きく異なり、CSSとの互換性もなかったため、プログラムをさわれない人たちにとっては導入のハードルが高く、なかなか普及が進みませんでした。
そこで、Sass 3.0のバージョンアップで、CSSと似た記法で記述できる、SCSS記法が導入されたことで、CSSとも完全互換になり、利用者が増え、一気に普及することになりました。

当初はRubyで開発されていましたが、C++で実装されたlibSassも開発され、Node.jsのツールなどからも利用できるようになり、さらに導入がしやすくなっています。

Sassを導入するメリット

Sassを導入するメリットにはどのようなものがあるでしょうか?

1.記述の簡略化ができる

親子関係にあるセレクタを入れ子構造でネストして書くことができるため、何度も同じセレクタを書く必要がなくなります。
ネストを使うことで、構造的にも見やすく、簡潔に記述することができます。

2.コードを再利用することができる

ミックスインや継承といった機能を使うことで、共通のスタイルをコンポーネント化し、コードを再利用することができます。
同じコードを何度も繰り返し書いたり、コピペを繰り返したりする必要がなくなり、値の変更の際も、最小限の変更で済むようになるのです。

3.プログラミングの基本的な処理が使える

演算や関数、条件分岐やループ処理など、プログラミングの基本的な処理が使えます。
これらのプログラミング処理とミックスインなどのコンポーネント化の機能を組み合わせることで、柔軟な設計が可能になります。

4.分割して作成したファイルを、CSSに変換する際に、まとめて一つのCSSファイルにできる

CSSでもファイルを分割して読み込むことはできましたが、最後にまとめて一つにすることはできませんでした。
分割したファイルをまとめる機能によって、HTTPのリクエスト数が増えることを気にすることなく、ファイルを分割してコードを分かりやすく整理できるようになります。

5.SCSS記法

実は、Sass以外にも同じような機能を持ったCSSプリプロセッサー、メタ言語が存在します。
SassのSCSS記法はCSSと似た記述方法をとるので、新しい言語を学ぶにしても、他の言語に比べて導入のハードルが低いという利点があります。

【動画講座】 フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~

HTML5とCSS3の基本的な知識があれば、Sassの知識はゼロからでも大丈夫!Udemyの動画講座なら、約5時間の動画でWeb開発の現場で使える技術を身につけることができます!

このブログから申し込むと定価1,2000円のところ、
90%OFFの1,200円で受講できるクーポンをプレゼント!