初心者向け：SASSを学ぶメリットをわかりやすく紹介

最近の猫田さんはTwitterで情報を収集することが多いようです。

そんな話をしている二人の元にキャニット先生がやってきました。

 

というわけで、今回はプログラミング初心者向けにSASSとSCSSの解説をします。

簡単にわかるSassの概要

SASSは、Sass（Syntactically Awesome Style Sheets）というRuby製のCSSメタ言語です。

Sassはハンプトン・キャトリン氏が設計、ネイサン・バイゼンバウム氏が開発したものとして知られています。SassはCSSを効率的に記述できるように設計・開発された言語であり、CSSでは長く複雑になってしまう記述もSassならシンプルに書けるのが特徴です。

SASSとSCSSとの違いは？

SCSSとSASSの違いは書き方であり、SCSSのほうが一般的には使用されています。そもそもSCSSは、SASSがCSSとの互換性が十分ではなかったため開発されたものであり、SCSSがスタンダードになっているのは当然の流れとも考えられます。SCSSはSCSS独自の書き方だけではなく、いつも通りのCSSも書けるのでより便利です。

SASS の記述例

SCSS の記述例

Sassを使う4つのメリット

①：ネスト（入れ子構造）が利用できる

CSSとのもっとも大きな違いでもありますが、ネスト（入れ子構造）による記述が可能なため、記述量を減らすことができます。ネストにより記述がわかりやすくなるメリットもあるでしょう。また、一箇所に記述がまとまるので、CSSよりも見落としが少なくなります。

②：条件処理や関数が使える

条件分岐や繰り返しなどの制御が可能です。そのため、少ない量のコード記述でも連続した処理など、色々なことができます。

③：変数が使える

変数は繰り返し使うカラーコードなどを定義すれば、何度でも簡単に利用できる機能です。変数を使えば、修正が生じても最小限の修正量で作業が済みます。変更がよく生じるところや何度も記述しなければいけない部分に利用するととても便利です。

④：Webで情報収集が容易

Sassは、上記でも説明した通り作業を効率化できたりと、とても便利な言語なため、利用者が多いです。そのため、分からないことがあってもすぐにWeb上で情報を収集することができます。

Sassの学習方法

①：書籍でのSass学習方法

「Web制作者のためのSassの教科書」という本がおすすめです。Sassの導入から詳しい使い方・テクニックが詳しく載っています。主にSassにまったく触れたことがない方を対象としているので、Sassの機能だけでなく、Sassの概要から利用環境の整え方まで丁寧に解説しています。

②：動画でのSass学習方法

プログラミングのオンライン学習サイトで有名なProgate（有料版）でもSassを学べます。ただ、講義自体は1レッスンしかなく基本的な部分の使い方に触れているだけなので、この動画だけでSassを学ぶのは無理です。最初にProgateの動画を見て、Sassの全貌が掴んでおく。そんな使い方が良いと思います。

初心者向けSASS講座：まとめ

コードの記述が少なく作業的な負担の削減と管理上の利便性の高さは、ホームページの制作時から運用にわたるまで長くメリットを生むことになります。スタンダードに利用されているSCSSを使えば、CSSも記述可能なので、SCSSへのシフトにあたっての負荷もあまりないでしょう。CSSに慣れてきたら、是非SASSやSCSSにも触れてみてください。