更新日: 2022 / 05 / 26

SCSS(SASS)のチートシート集

カテゴリー: coding

extendやmixinなどよく忘れるSCSSの書き方をシンプルにまとめたチートシートを集めました。

ブラウザでチェックできるものとPDFでダウンロードできるものがあるので必要に応じて使い分けることができます。

SCSSのチートシート

ブラウザでチェックできるSCSSのチートシート

Sass cheatsheet ブラウザでチェックできるSCSSのチートシート1

1つめはSCSSの機能全体をさっと見渡せるチートシート。グループ分けされたシンプルなUIでどんな機能が使えるかどんな書き方かをチェックできます。書き方忘れたときは重宝すること間違いなし。

SCSS Cheatsheet ブラウザでチェックできるSCSSのチートシート2

2つめはこちら。先ほどより細かい解説付き(英語)でSCSSの書き方がまとめられています。公式ドキュメントだとちょっと文章多すぎっていうときはこっち使うといいかもしれません。

PDFでダウンロードできるSCSSのチートシート

Sass cheatsheet PDFでダウンロードできるSCSSのチートシート

こちらはPDFでダウンロードできるチートシート。印刷して使うこともできるし、別ウィンドウで見ながらSCSSのコーディングもできます。

SCSSのコンパイル方法は?

SCSSはそのまま使えるわけではなく、一度CSSにコンパイル(変換)する必要があるのでnodeでやったりGulp入れたりしなければなりません。はじめてのときはこれが結構大変でnodeのインストールとかバージョンとかlinuxコマンドとか出てきてパニックになった記憶があります。

SCSSのコンパイルはもっと簡単な方法があるので最初はそっちで練習してGulpは後回しでいいと思います。

ブラウザでコンパイルする

SCSS Compiler SCSSのコンパイル方法は? ブラウザでコンパイルする

一番簡単なのはブラウザにscssのコードをコピペしてコンパイルする方法ですね。これなら最近コーディングはじめたばかりの新米コーダーさんでも大丈夫。

VSCodeの拡張機能でコンパイルする

Live Sass Compiler SCSSのコンパイル方法は? VSCodeの拡張機能でコンパイルする

もう一つの方法はVSCodeの拡張機能を使うやり方。無料で使えるコードエディタのVSCodeに拡張機能を入れるだけでコンパイルできるので超便利です。

さいごに

SCSSは関数とかミックスインとか使いこなせばかなり複雑なコーディングができてしまいます(Bootstra5の中身とか)。逆に複雑になりすぎて後から見たとき意味不明なコードになってしまうので、いつもはネストとか変数くらいしか使わないんですよね。

そうすると@extendとか@includeとかの使い方忘れるのでチートシートが手放せなくなるのです。