え、まだ生CSS書いてるの？そんな人のための保守性に優れたScss入門
どっこいしょ！インターンのおくだです。
ちょっぴり刺激的なタイトルにしてみました。
内容は私の愛してやまないSass(Scss)についてです。
フロントエンドエンジニアやコーダーはもちろん、コーディングもするよっていうデザイナーさんも必見です。
目次
Sass(Scss)とは
Sass(Scss)はCSSのプリプロセッサです。
プリプロセッサとは、プログラムに対して前処理を行うもののことを言います。
何やらぱっとイメージできないかもしれませんが、ここでは「楽なCSSの書き方」くらいに覚えていただければよいです◎
Sassには「Sass」と「Scss」という2つの種類があるのですが、
今回は一般に使用する人が多いとされるScssをご紹介します。
(以下、表記をScssで統一します。)
このScssは生のCSSより保守性やコーディング速度などの面で非常に優れており、
色々便利すぎて一度Scssで書くともう生のCSSには戻れません。
今回はそのScssの便利な特徴と、使い方についてご紹介します。
Scssのメリット
変数が使える
JavaScriptやRubyなどのプログラミング言語と同じように、
Scssでは変数が使えます。
よくカラーコードなどが変数に代入して使われます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// カラーコード $main: #0a1761; $sub: #3a78cf; $primary: #f09a4f; $font: #333; main { background-color: $main; color: $font; } aside { background-color: $sub; } |
↓CSS変換後
|
1 2 3 4 5 6 7 8 |
main { background-color: #0a1761; color: #333; } aside { background-color: #3a78cf; } |
変数に代入することで「えっと、ここは#3a78cfで……」っていちいちカラーコードを入力する手間も省けます。
ほかにもメインの色が変更されたとき、もし生のCSSを書いていたら、数十箇所書き換えなければならない場合があります。
しかし、Scssなら代入している箇所を変更するだけで済みます。
|
1 |
$main: 古いカラーコード; |
↓
|
1 |
$main: 新しいカラーコード; |
ネストで書ける
今までは親要素からずらーっと記述する必要がありましたが、
Scssではネストで親子関係を示せるので、非常にスッキリします。
|
1 2 3 4 5 6 7 |
.image-wrap { width: 80%; img { width: 100%; } } |
↓CSS変換後
|
1 2 3 4 5 6 7 |
.image-wrap { width: 80%; } .image-wrap img { width: 100%; } |
※プロパティの詳細度の観点から、子・孫セレクタをネストすることは推奨されない場合があります。
（すべてにクラスを振って指定することで、詳細度を一定にする方法がベターとされています。）
しかし、以下のような場合はとても便利で私もよく使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 |
.heading { font-size: 32px; position: relative; &:before { content: ""; border-bottom: 2px solid #ddd; position: absolute; right: 0px; top: 50%; } } |
↓CSS変換後
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.heading { font-size: 32px; position: relative; } .heading:before { content: ""; border-bottom: 2px solid #ddd; position: absolute; right: 0px; top: 50%; } |
要素だけでなく、プロパティにおいてもネストは有効です。
paddingやmarginなどは値を複数並べて記述できますが、よく「上右下左の順番だから、10px、15px……」と考えながら書くことが多いです。
また、コードを読むときもパッと見、わかりにくいと思います。
しかし、Scssなら以下のような書き方ができるので、一覧性に優れています。
かつ、書く順番はバラバラでも問題ありません。
|
1 2 3 4 5 6 7 8 |
.text-box { padding: { top: 10px; right: 15px; bottom: 15px; left: 10px; } } |
↓CSS変換後
|
1 2 3 4 5 6 |
.text-box { padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 10px; } |
レスポンシブに対応しやすい
今までブレイクポイントを使ったCSSの記述では、
メディアクエリの記述を別途用意し、記述する必要がありました。
そのため、PC用の記述とスマホ用の記述が遠く離れてしまっていることがネックでした。
|
1 |
@media (min-width: 834px) {} |
しかもメディアクエリの記述は長い上に、
834pxなどと書かれても、それがスマホ用なのか、タブレット用なのかハッキリしません。
とくに近年はスマホのサイズが目まぐるしく変わっているので、なおさらのことです。
Scssでは最初にmixinという記述を書いておけば、簡単に呼び出すことができます。
|
1 2 3 4 5 6 |
$sp: 834px; // スマホ用のブレイクポイント @mixin sp { @media (max-width: ($sp)) { @content; } } |
spという名前のmixinを作成します。
@content;と書かれているところは、追加される記述が入る場所です。
呼び出し方は以下の通り。
|
1 2 3 4 5 6 7 |
.top-image { width: 80%; @include sp { width: 100%; } } |
↓CSS変換後
|
1 2 3 4 5 6 7 8 9 |
.top-image { width: 80%; } @media (max-width: 834px) { .top-image { width: 100%; } } |
@include ◯◯（mixinにつけた名前）と記述するだけで、設定したブレイクポイントを呼び出せます。
名前がつけられているので、スマホ用かタブレット用かもハッキリわかります。
今回の場合は834pxの以下のときはwidth: 100%にするという記述です。
mixinはメディアクエリ以外の記述も設定できるので、応用の幅が広いです。
今回は入門なので他の活用法は割愛します。
ファイルを呼び出せる
ある程度大きなサイトのコーディングになると、スタイルシートを分割して記述することがあると思います。
そんなとき、HTMLにlinkタグを大量に記述して読み込みたくないですよね。
Scssでは他のファイルを読み込み、1つのファイルにすることができるので、分割したScssをcommon.scssですべて呼び出すことが一般的です。
読み込まれる側のファイルは名前を「_reset.css」みたいな感じで、アンダーバーを先頭につけます。
これはあとで扱う「コンパイル」をするときに、「1つのファイルにScssファイルが集約されてるから、このファイルはコンパイルしなくていいよ」というサインです。
分割済みのScssのことをpertialといいます。
読み込む側のcommon.scss（ファイル名はお好みで）には@importの記述をします。
|
1 2 3 |
@import "reset"; @import "setting"; @import "company"; |
「.scss」などの拡張子とアンダーバーは不要です。
階層の違うファイルを指定するときは普通にパスを記述すればOKです。
|
1 2 |
@import "pertial/header"; @import "pertial/footer"; |
横ならびにして記述することも可能です。
|
1 |
@import "reset", "setting", "company"; |
ScssをCSSにコンパイルする方法
Scssの基本的な活用方法は以上のとおりです。
しかし、Scssはそのままでは使えません。
CSSの形式に出力する必要があります。
ScssをCSSに変換することを「CSSにコンパイルする」という言い方をします。
CSSのコンパイルにはいくつか方法があります。
一番簡単！VS Codeの拡張機能『Live Sass Compiler』を使う
インストールして右下に出る『Watch Sass』を押すだけ。
（コマンドパレットからも機能を呼び出せます。）
細かい設定などはこの記事が分かりやすいです。
Dreamweaverを使っている人もエディタの機能で自動コンパイルできますので、
以下の記事を参考にしてください。
タスクランナー『Gulp』を使う
タスクランナーを使う方法はこちらにまとめていますので、ぜひ御覧ください。
まとめ
Scssにはたくさんのメリットがあることをご理解いただけたでしょうか。
本当は関数まで作れちゃうScssですが、プロジェクトを引き継いだ人がコード見て「？？？」となってはいけません。
複数人のプロジェクトを想定した場合、今回くらいの使い方だったらみんな覚えられると思います。
コンパイルも一度設定すれば、あとはほぼ自動でやってくれるので面倒なことはありません。
これからは生のCSSを書く機会はどんどん減って、きっとScssがスタンダードになっていくと思います。
すでにいくつかの記事で、Scssの利用率の高さは示されています。
みなさんもぜひチャレンジしてみてください(⌒▽⌒)
関連記事
記事を書いた人
睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。
睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。