学習コスト関係ない！Sassを始めるなら今から

CSSのプリプロセッサのSass。いいとは聞いていたけど、なかなか手がつけられずにいました。
学習コストがかかるし、チームでの更新に不都合もあるようだし。

当時の自分はなかなかSassの学習にまで時間を割く余裕がなく、他のことを学ぶのを優先にしていました。

そんな僕が、なぜSassを始めるなら今からという考えに至ったかを記事にまとめています。

Sassとは

CSSを拡張したメタ言語で、変数やミックスインなどの関数が使えることが特徴です。

Sassと一言で言ってもSass記法とScss記法の２種類があり、最近ではCSSの記述に近いScssが主流になっています。

読み方は「サース」「サス」と人によって違ってましたが、僕の実体験では、仕事で制作会社の方と話した時には大半の方がサス、たまに一部の方がサースという感じで読んでいました。

この辺りは、コーダーの方の読み方に合わせて使い分けたらいいと思います。

Sassがオススメの理由

コーディングにかかる時間が少なくなります。
また、管理面においてもだいぶん短縮されます。
学習コストも実はそこまでかかりません。
CSSさえちゃんと理解できている人であれば、割とすぐに使えます。

僕自身は、本を一冊とネット検索で調べてで十分だと感じました。

コーディングにかかる時間の減少

変数が使える大きなメリットでした。

あのカラーの16進数はなんだっけ？
インナーの幅はいくらだっけ？

ということで、立ち返ることが少なくなります。

テーマカラーを緑から赤に変えようって思ったら、変数に指定しているカラーを変えるだけなので、どんなに楽なことか。

また、Sassはファイルを分割することが可能なので、header部分のCSSはどこだっけ？などと探す時間も減り、非常に効率的にコーディングすることができます。

他にもミックスインなど、素晴らしい機能が満載です。

Sassをもう少し深掘りした記事は後日まとめていこうと思います。

学習コストはそこまでかからない

Javascriptにしろ、PHPにしろ新しい言語を導入するには、部分的な導入が難しく、なかなか実用までに時間がかかります。
ことSassに関しては、CSSの記述でコーディングしても問題がないため（ただし、SCSS記述に限る）、最初に全てを覚える必要がありません。
CSSの基礎さえ知っていれば覚えたSassを部分的に案件で導入していくことで、覚えていくことが可能です。

Sassを始めるのに準備が必要

Sassはそのまま使うことができません。SassをCSSに変換することをコンパイルといい、その作業をするための準備が必要になります。

コンパイルするには、Rudyのインストールが必要です。（Macの場合はもともとRudyが入っているため不要）
あの真っ暗な画面のターミナルやコマンドプロンプトで・・・環境構築をしていきます。

となると、なかなか抵抗があります。

どうもDreamWeaverにはすでにSassをできる環境になっているとのことなので、今回はDreamWeaverでのSassを試してみました。

DreamWeaverでの方法

Adobe DreamWeaverを持っている方なら、これが一番楽な方法かと思います。（ただし、古いVerは対応していません。）

保存したら、そのままCSSに反映される

Command + Sで自動的にコンパイルされて、CSSに反映されます。

ただし、長くはないですが、少々保存に時間がかかります。

でも、DreamWeaverでやるとたったこれだけ。

まとめ

実は、すぐ始めるに越したことないのがSassです。

僕自身、学習コストを気にしたり、チームで運用していくのに社内にSassを使えるメンバーがいないために、導入を見送っていました。
僕の友人などのSassを導入している仲間からは、導入したら楽になるし、デメリットも少ないよと聞いていました。

実際導入してみて気がついたのが、その日から導入できる事実です。

ぜひ、Sassを導入してみてください。