遅れ馳せながらSassが便利すぎた

BLOG

2020/02/10 [Mon] WEB

最近、ご縁があって昔所属していたWEB制作会社とまた一緒にお仕事させていただけることになりました。

今後のことについて打ち合わせする中で、Sassを勧められて新しい案件から使い始めました。

Super Awesome!!

いや、本当は「Syntactically Awesome Style Sheets」＝「構文的に凄いスタイルシート」ですが、「めっちゃ凄い（Super Awesome）スタイルシート」で間違いありません。

近年の多様なキャリアに対応するためにCSSが膨大になっていくサイト作りの中で、私はそもそもSassの基本概念に従ったCSSの構成でサイトを作っていました。

Sassの書き方や仕様については詳しく説明しているサイトがたくさんあるので省略しますが、私は今までCSSをパーツごとに細かく分けて読み込んでいました。

…といった感じです。

当然ながらCSSが増えると読み込みにも時間がかかりますが、速度を測るサイトで実測してみると、CSSファイルの数自体はあまり大きな影響を及ぼさないことが分かり、サイト管理の分かりやすさを優先してその仕様をここ最近は導入していました。

が。Sassを使えば、これらのファイルをもっと細かく分けたとしても、例えば「style.sass」などひとつのSassファイルで@importして各Sassファイルをまとめて呼び出してコンパイルすることによって、全てを一気に圧縮してひとつのCSSファイルにまとめてくれる！

しかも嬉しいことにコメントアウトなど余計なものは省いてくれます。（※書き出し設定によって、/* */のコメントアウトは残るようですが）

Sassを使う環境を用意するのはやや手間ではありますが、「Sass」で検索するだけで丁寧に導入の仕方を説明しているサイトがたくさん出てくるので（私は面倒臭がりなのでココで解説する気はございません！笑）それに従ってやっていけば数十分でできてしまいます。

コンパイラは私は今のところDreamweaverを使っていますが、コンパイルの際にバグが多いので他のエディタに乗り換えるか検討中です。

※後日談：その後「Visual Studio Code」に乗り換えました。

コンパイラによって設定は若干違うと思いますが、コンパイル方法は容量を最小限にできる「compressed」が俄然オススメです。

外出時などに急遽スマホでサーバーに接続してコンテンツ修正をすることもあるのですが、それでもCSSまで修正するようなことは滅多にないからです。

何で今までSassを使っていなかったのか？と悔やまれるばかりです。