Sass

昨今、Webサイトにスタイルを当てるのは、「CSS」ではなく「Sass」が主流だそうです。
使用しなければいけないタイミングが来たので、私レベルで学んだ事をメモしておこうと思います。

※初心者の方でも大筋を理解できるように説明を魔改造しています。
細かいことは気にしないスタンスで見てください。

Sassとは

Sass（サース^[2][3]、英: Syntactically Awesome Style Sheets）は、ハンプトン・キャトリン^[4]が設計しネイサン・バイゼンバウム^[5]が開発したスタイルシート言語である。^[6][7] 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。

Sass は Cascading Style Sheets (CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScript はスクリプト言語自体を示す。 はじめにできた「インデント構文」では、Haml（英語版）と同様にコードブロックや改行コードを分離する際に字下げを活用している。単にSassと言ったらインデント構文のことを指す場合も多い。^[8]新しい構文である「SCSS」（Sassy CSS）は、CSSのようなブロックの書式を使用し、ブロック内の別々の行にブロックとセミコロンを示すため波括弧を用いている。

引用元：フリー百科事典『ウィキペディア（Wikipedia）』

まぁ難しい言葉でごちゃごちゃと書いてありますね。
要約すると、以下のような内容になります。

SassはCSSを書きやすくした言語です。

直訳すると以下のとおりです。
「Syntactically（構文的に）、Awesome（素晴らしい）、Style Sheets（スタイルシート）」
構文的に素晴らしいと自分で名乗ってしまうなんて、だいぶ大きく出ましたね。

「インデント構文」「SCSS」の2種類の書き方があり、
一般的（？）に、インデント構文を「SASS記法」、SCSSを「SCSS記法」と呼んでいます。
それぞれ、「style.sass」や、「style.scss」のようなファイル名にします。

ここまでは簡単ですね。

※今回は書き方についての説明は省きます。

CSSじゃだめ？

CSSで書き慣れているし、別に不便もしていない。
CSSで十分なんじゃない？なにがうれしいの？

Sassで記述しても、Webサイトとして表示させるには、後にCSSに直さなければいけません。
CSSに直す作業は「コンパイル」と呼ばれ、それをやってくれるソフトウェアのことを「コンパイラ」と呼びます。
コンパイラが自動的にCSSに直してくれるとはいえ、2度手間では？

そうですね。
何がうれしいのか分からなければ使う気持ちになりませんよね。
自分で構文的に素晴らしいとか名乗ってるんだからそれ相応の素晴らしさでなければ納得できません。

プログラミング言語か否か

JavaScriptをご存知でしょうか？

html/css だけでもホームページは作成できますが、
WebサイトをよりリッチにするにはJavaScriptというものを使用します。

かつて私もそうでしたが、初学者の方は「CSSとJavaScriptの違いが分からない」という壁に、まずぶち当たります。
その違いを一言でいうと、「プログラミング言語か否か」です。

「プログラミング言語か否か」という違いは様々ですが、
ここで注目していただきたいのは、「コードを使い回せるか否か」という点です。

JavaScriptは、プログラムに名前をつけておくことができます。

コードを使い回す

上記に、見るだけで嫌な気持ちになる勤務前のタスクがあります。

このタスクを全部ロボットにやらせたいのですが、
ロボットの横について常に指示を出していたら効率悪いですね。
嫌な上司もできれば視界に入れたくないです。

そんな時に役に立つのが、作業に名前を付けるという行為です。
事前に、勤務前のタスクをロボットに渡しておいて、
良きタイミングで「やっといてほしいことヨロシク」と一言いえば、全て感情なくやってくれます。

このタスクは勤務後にも「やっといてほしいことヨロシク」という一言でロボットがやってくれますし、
もっとうれしいことに、他のロボットにもこの一言を使えます。

これが「コードを使い回す」という便利機能です。

CSSでコードを使いまわしたい

さて、プログラミング言語では、コードをいつでも使い回せるように名前をつけておくことができました。
CSSでもよく使うスタイルを使いまわしたりできたらとても便利ですね。

そんな理想から生まれたのが「SASS」です。

例えば、#9DE3AAというカラーコード（淡めのグリーン）があるとします。
このカラーコードを、メインカラーにしたいです。

メインカラーなので、文字色はもちろんの事、コンテンツの背景色やロゴにも同じような色をつけたいです。
これを「font」「background」「logo」とそれぞれクラスを用意したところで、全てに#9DE3AAと指定するのは手間ですし、
万が一「メインカラーを青色にしてください」と急遽変更があった場合は、それぞれのカラーコード部分を全て書き直すことになります。

それが、以下のようにあらかじめ定義していたらどうでしょう。

「font」「background」「logo」というクラスのスタイルには、「main-color」と書くだけでいいですし、
万が一変更があった場合も、全て書き直さずに「main-color」の中身のカラーコードを変更するだけで済みます。

「上司に謝罪する」というタスクが増えた場合も、
「やってほしいこと」にタスクを追加するだけで、嫌な上司相手にも全ロボットが感情なく謝罪してくれます。

とっても便利ですね。

CSSの進化

SASSの便利さは伝わりましたよね？（圧）

しかしここで朗報（悲報？）です。
実は、最近のCSSはめちゃくちゃ進化しています。

CSSでも、名前を付けることが出来るようになりました。
更には、計算もできるようになりました。

細かい話をすると、SASSにできて、CSSではまだ出来ない事もあるのですが、
小規模なサイトを制作する分には、正直CSSでも全く問題ないのが現状です。

もちろんプロジェクトや、クライアント様の環境によっても変わってきますが、
SASSとCSSの利用率は半々くらいみたいです。

まとめ

私は今回Sassを使用しなくてはいけないタイミングが来たので学習を初めましたが、
正直なところ、VScodeへの拡張機能追加やプロジェクトファイルへのインストール、コンパイル・デプロイ作業など、
事前準備が多く必要ですので、規模によってはコスパが悪い可能性もあります。

特に、まだフレームワークなどに触れたことがない方は
Sass以外の学習コストがまずはとても高いので、私と同じような境遇でなければ、
学習は後回しにした方がいいのではないかと思います。

そんなわけで、まだSassについての学習は初めたばかりの私が
図々しくもエラそうに進めてきた解説ですが、ここまで読んでいただいてありがとうございました。