【お前じゃなきゃダメだ】Sassを使おうとして疲労コンパイルしそうになった人が、やっぱり便利じゃんって惚れ直した話

「Emmet(省略記法)も書き飽きた。コーディングをもっともっと早くして、はやくおうちに帰りたい。」webデザイナー中級者、コーダー、フロントエンドエンジニア界隈の方々は、日ごと作業の効率化を図っていますよね。

そろそろコーディング速度で一皮向けたいと思っている方は、 CSSを拡張したメタ言語”Sass(SCSS)“ で書いてみてはいかがでしょう。この記事では、話は聞いたことあるけど、いまいちメリットが見いだせない方に、「ちょっと付き合ってみてもいいかな…」と思えるようなメリットを紹介します。

a

そもそもSass(サス)とは、CSS+α(メタ言語)のこと

メタ言語は「特定の言語に対してルールを設け、応用させるようにできる言語。」 のことです。ここでいうSassは「CSS」の「拡張するためのメタ言語」です。

b

たとえば、ゲームでも初期の呪文は単体の敵にしか攻撃ができませんが、その呪文のレベルがあがると全体攻撃ができるようになったり、特殊効果がついたりします。それと同じようにCSSの言語をSassをつかってパワーアップ(拡張)させます。すると、Twitterのリスト管理のように「スタイルシートをカテゴリー分け」したり、ときには代入処理や変数の概念をつかって重複したスタイルを使いまわし、膨大になりがちなソースコードをグッと少なく、シンプルにかつ、カスタマイズしやすいようになるのです。
※その他、CSSの有名なメタ言語にはLESSなどがあります。

Sassがどうして、愛されているのか

【その1】じつはCSSでそのまま書いたってOK!互換性があるから安心

 

c

「いきなりネストとか変数とか意味わかんないし、怖い」と思う方も安心してください。SCSS記法はCSSと互換性があるので、はじめはそのまま書いても問題ありません。まずは今すぐにできる、拡張子を変えることにトライしてみましょう!
※ただし、SASS記法ではCSSと同じ記法ではかけません。

– SASSには本来、「SASS記法」と「SCSS記法」2つの記法があります
はじめにリリースされたSASS記法は、スタイリッシュさを追求したため、{}などを省略しインデントや改行の位置などでの格式がルールでした。そのためCSSそのままの書き方がつかえず、新しい記述ルールを覚える必要があったのです。このような背景から、SASS記法が世の中に浸透することは多くはありませんでした。

しかし、その問題を解消したのが、SASS記法の妹の位置にあたる「Sassy CSS=(イケてるCSS=SCSS記法」の誕生です。CSSそのままの記述がOKで導入ハードルが低くなり、良いところももちろん残したSCSS記法はみるみる話題になりました。
※公式サイトのサンプルがSCSS記法で書かれていることもあり、現在SCSS記法を「SASSで書く」と言われてることが一般的になっています。

【その2】スタイルシートをディレクトリごとに管理でき、!importantを使うことがグッと減る

CSSのみで管理していると、つい起こりがちなスタイルの上書き合戦。headerやfooterさらにfloat、加えてJavaScriptのスタイルなどを付け加えていくうちに、どこにスタイルがかかっているのか把握しづらくなってしまうということがありがちです。

d

– import機能はソースをカテゴライズ。レイヤー化できるから、もう迷わない。
Sassのimport機能をつかえば、headerの部分はheaderのスタイルシート、footerはfooterのスタイルシート…というように、それぞれレイヤー(パーツ)ごとにファイルを生成し、統括用のスタイルシートに順番にならべて整理できます。なので、レイヤー分けされた部分的なスタイルシートを差し替えるだけで、大幅なコードの変更や修正にも柔軟に対応できるプロジェクト設計ができます。さらにソースも把握がしやすいので、未然に!importantの乱用を防ぐこともできるのです。

1-3

 

f

※importさせるファイルの文頭に_(アンダースコア)をいれることで、コンパイルさせるかどうかを判断させます。

【その3】1ファイルあたりのコード量も少なくなり、さらに見やすく美しく

 

h

上の画像のように重複するクラス名は、ネストや&(アンパサンド)などでまとめてかくことができます。命名規則はBEMなどを活用し工夫すると、ユニークな部分だけにスタイルをあてることもできます。このようにスッキリと記述できるので、CSSの魅力をもっと引き出すことができますね。
※ここでは、のちほど説明する$と@includeを組み合わせた状態のソースになっています。

【その4】フレームワークとの連携もしやすく、笑顔になれる

 

i

【その1】で説明した機能を応用すれば、情報量の多いCSSのフレームワークや、jQueryなどのみに当たられたスタイルもキレイに管理することができます。Bootstrapなどのフレームワークを流用するさいにも大活躍します。

【その5】変数がつかえて、スタイリッシュなコーディングができる

「色変えを一括ですませる変数$(ダラー)」「自作したスニペットを使いまわしたいときに活躍する@mixin」
たとえば、統一化しているカラーの色変え対応。置換機能で地道にカラーコードで修正していませんか?変数$を使えば、$で定義しているカラーコードのみを変更するだけで、代入している全ての箇所を一括変換することができます。それと同じ要領で、一度作ったスタイルは@mixinの機能を使うと大変便利です。

例)

1-7

 

1-5
次のページ:
Sassをどうやって使えばいいの?

 

この記事を書いた人:nomal

nomal

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。