triBlog

トリアナのブログ。

WEB制作
フロントエンド

え、まだ生CSS書いてるの?そんな人のための保守性に優れたScss入門

ばあちゃんが退院して安心してたら、入院代12万円払わされました
ライター画像
おくだ

どっこいしょ!インターンのおくだです。
ちょっぴり刺激的なタイトルにしてみました。
内容は私の愛してやまないSass(Scss)についてです。
フロントエンドエンジニアやコーダーはもちろん、コーディングもするよっていうデザイナーさんも必見です。

Sass(Scss)とは

Sass(Scss)はCSSのプリプロセッサです。
プリプロセッサとは、プログラムに対して前処理を行うもののことを言います。
何やらぱっとイメージできないかもしれませんが、ここでは「楽なCSSの書き方」くらいに覚えていただければよいです◎
Sassには「Sass」と「Scss」という2つの種類があるのですが、
今回は一般に使用する人が多いとされるScssをご紹介します。
(以下、表記をScssで統一します。)

このScssは生のCSSより保守性やコーディング速度などの面で非常に優れており、
色々便利すぎて一度Scssで書くともう生のCSSには戻れません。

今回はそのScssの便利な特徴と、使い方についてご紹介します。

Scssのメリット

変数が使える

JavaScriptやRubyなどのプログラミング言語と同じように、
Scssでは変数が使えます。

よくカラーコードなどが変数に代入して使われます。

↓CSS変換後

変数に代入することで「えっと、ここは#3a78cfで……」っていちいちカラーコードを入力する手間も省けます。
ほかにもメインの色が変更されたとき、もし生のCSSを書いていたら、数十箇所書き換えなければならない場合があります。
しかし、Scssなら代入している箇所を変更するだけで済みます。

ネストで書ける

今までは親要素からずらーっと記述する必要がありましたが、
Scssではネストで親子関係を示せるので、非常にスッキリします。

↓CSS変換後

※プロパティの詳細度の観点から、子・孫セレクタをネストすることは推奨されない場合があります。
(すべてにクラスを振って指定することで、詳細度を一定にする方法がベターとされています。)

しかし、以下のような場合はとても便利で私もよく使用しています。

↓CSS変換後

要素だけでなく、プロパティにおいてもネストは有効です。
paddingやmarginなどは値を複数並べて記述できますが、よく「上右下左の順番だから、10px、15px……」と考えながら書くことが多いです。
また、コードを読むときもパッと見、わかりにくいと思います。
しかし、Scssなら以下のような書き方ができるので、一覧性に優れています。
かつ、書く順番はバラバラでも問題ありません。

↓CSS変換後

レスポンシブに対応しやすい

今までブレイクポイントを使ったCSSの記述では、
メディアクエリの記述を別途用意し、記述する必要がありました。
そのため、PC用の記述とスマホ用の記述が遠く離れてしまっていることがネックでした。

しかもメディアクエリの記述は長い上に、
834pxなどと書かれても、それがスマホ用なのか、タブレット用なのかハッキリしません。
とくに近年はスマホのサイズが目まぐるしく変わっているので、なおさらのことです。

Scssでは最初にmixinという記述を書いておけば、簡単に呼び出すことができます。

spという名前のmixinを作成します。
@content;と書かれているところは、追加される記述が入る場所です。
呼び出し方は以下の通り。

↓CSS変換後

@include ◯◯(mixinにつけた名前)と記述するだけで、設定したブレイクポイントを呼び出せます。
名前がつけられているので、スマホ用かタブレット用かもハッキリわかります。
今回の場合は834pxの以下のときはwidth: 100%にするという記述です。

mixinはメディアクエリ以外の記述も設定できるので、応用の幅が広いです。
今回は入門なので他の活用法は割愛します。

ファイルを呼び出せる

ある程度大きなサイトのコーディングになると、スタイルシートを分割して記述することがあると思います。
そんなとき、HTMLにlinkタグを大量に記述して読み込みたくないですよね。
Scssでは他のファイルを読み込み、1つのファイルにすることができるので、分割したScssをcommon.scssですべて呼び出すことが一般的です。

読み込まれる側のファイルは名前を「_reset.css」みたいな感じで、アンダーバーを先頭につけます。
これはあとで扱う「コンパイル」をするときに、「1つのファイルにScssファイルが集約されてるから、このファイルはコンパイルしなくていいよ」というサインです。
分割済みのScssのことをpertialといいます。

読み込む側のcommon.scss(ファイル名はお好みで)には@importの記述をします。

「.scss」などの拡張子とアンダーバーは不要です。
階層の違うファイルを指定するときは普通にパスを記述すればOKです。

横ならびにして記述することも可能です。

Scssを使うには

Scssはそのままでは使えない

Scssの基本的な活用方法は以上のとおりです。
しかし、Scssはそのままでは使えません。
CSSの形式に出力する必要があります。

ScssをCSSにコンパイルする方法

ScssをCSSに変換することを「CSSにコンパイルする」という言い方をします。
CSSのコンパイルには大きく分けて2種類あります。
直感的に操作できるGUIコンパイラを使う方法と、
タスクランナーを使ってコンパイルする方法です。

GUIコンパイラの一つ、Koalaを使う人はここからインストールして使用してください。

インストールして、Scssの入ったファイルを指定するだけです。
コーディングの際にKoalaを起動していれば勝手にコンパイルしてくれます。
詳しい設定の仕方はこちらの記事が参考になりますので、リンクを貼っておきます。

タスクランナーを使う方法はこちらにまとめていますので、ぜひ御覧ください。

まとめ

Scssにはたくさんのメリットがあることをご理解いただけたでしょうか。
本当は関数まで作れちゃうScssですが、プロジェクトを引き継いだ人がコード見て「???」となってはいけません。
複数人のプロジェクトを想定した場合、今回くらいの使い方だったらみんな覚えられると思います。
コンパイルも一度設定すれば、あとはほぼ自動でやってくれるので面倒なことはありません。
これからは生のCSSを書く機会はどんどん減って、きっとScssがスタンダードになっていくと思います。
すでにいくつかの記事で、Scssの利用率の高さは示されています。


みなさんもぜひチャレンジしてみてください(⌒▽⌒)

WEBサイトなどのご相談はこちらからどうぞ

記事を書いた人

ライター画像
おくだ 清純派新入社員

triBlog更新頻度No.1。フロントエンドのあれこれを発信中! 2020年4月より、インターンから正社員になりました!

ライター画像
おくだ 清純派新入社員

triBlog更新頻度No.1。フロントエンドのあれこれを発信中! 2020年4月より、インターンから正社員になりました!

ページ上部へ