SCSSとはSassの1種で、簡単に言うと「CSSの上位互換」のようなものです。
- CSSの記述が楽になり、作業効率が爆上がりする
- 後から見てもわかりやすく、メンテナンス性が高い
- 記述方法が似ているため、学習コストが低い
使い方の流れは以下のようになります。
- SCSSを使える環境にする
- SCSSで記述していく
- CSSに変換する(自動)
- HTMLファイルにいつも通りにCSSを読み込ませる
今回はVisual Studio Codeでの「SCSSを使える環境にする」についての記事です。
既にこの準備を終えている方は、SCSSの記法の記事を準備しています。
SCSSの環境準備…。
何やら難しそうなオーラを出していますが、プラグインをインストールすればそれでほぼ終わりです。
ちっとも難しくはありません!
プラグインをインストールするだけでCSSの記述効率が鬼のように上がるなんて、ちょっと素敵すぎやしませんか?
そもそもSCSSとは?
「細けえこたいいんだ!はやく使い方教えろ!」
と思っているそこのあなた!飛ばしていいですよ!
SCSSとは先ほども述べた通り、CSSの上位互換のようなものです。
.scssという拡張子のファイルに、SCSSの記法を使って記述をしていきます。
CSSを知っていればSCSSは、ほぼ感覚的に記述ができるので非常にコスパがいいです。
SCSSの凄さは別の記事で紹介しています。
プラグイン「Live Sass Compiler」のインストール
それではさっそくやっていきましょう!
VSCode(Visual Studio Code)を開き、サイドメニューの「拡張機能」から
「Live Sass Compiler」
と検索し、Glenn MarksのLive Sass Compilerをインストールします。

インストールし有効化したら、一度VSCodeを再起動しましょう。
本家はRitwick Deyさんのプラグインなのですが、2018年を最後に更新が止まっており、Glenn Marksさんが引き継いで更新してくれています。
いざ!SCSSの使い方!
適当に「style.scss」という名前でファイルを作成してみましょう!
style.cssじゃないですよ!style.scssですよ!
すると下の方に「Watch Sass」というのが出てくるのでクリック!

すると…「なんかわけわからん英語出てきた!」
これは、無事SCSSをCSSにコンパイルできましたよというお知らせなので消してOK!
コンパイルとは、簡単に言うと「変換」のことです!
それより、左をご覧ください!
style.scssと同ディレクトリにCSSがぬるっと生まれていますね!

「style.css.map」は、検証ツールでCSSを確認した際、style.cssの何行目かではなく、style.scssの何行目かを教えてくれる案内役です。
「Watch Sass」だった部分が「Watching…」に変わったらLive Sass Compilerが起動している合図です。
それでは、実際に何か記述してコンパイルしてみたいですね!?
もううずうずしていますね!?
適当に何か記述して再度上書きしてみましょう!
SCSSでは、普通のCSSの記述も有効です!
何も思いつかなかったら下記をコピペして上書きしてみましょう。
ul{
display: flex;
li{
/* SCSSのコンパイルテストです */
width: 20%;
}
}
// ちなみにこのコメントアウト使えます。
// このコメントアウトはCSSに反映されません。
style.cssを見てみると、見事にコンパイルされていますね!
プラグインの基本的な使い方はこれにて終了。
ただ、もう少しだけ便利にするために設定を触っていきましょう。
すぐ終わりますのでご安心ください!
Live Sass Compilerで最初にやっておきたい設定
四の五言わずにまずは設定方法から!解説は後回しじゃ!
まずは以下の手順でLive Sass Compilerの設定編集画面まで進んでください
- VSCodeサイドメニューの拡張機能アイコンをクリック
- 「Live Sass Compiler」の歯車アイコンをクリック
- 「拡張機能の設定」をクリック

すると訳のわからないイングリッシュまみれの画面が出てきます。
そこを恐れずに「settings.jsonで編集」をクリックします。

するとさらに訳のわからない画面が出てきますね。
settings.jsonはVSCodeのいろんな設定がつまった場所です。
不用意に触らないようにしましょう。
}(波括弧閉じ)の直前に以下をコピペします。
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css/"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
]
もし既に}の直前にある記述の末尾に,(カンマ)がなかったら、,を打ってあげてください。

これで3つの設定が追加されました。
これでもう何も恐れることはありません。あなたは最強です。
試しにSCSSファイルを再度上書き保存してみると、「css」ディレクトリが作成され、中に4つのファイルが入っていたら成功です。

それでは、それぞれの設定について見ていきましょう!
オートプレフィックスを自動で付与する
まずは1つ目の設定、こちらについての説明です。
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
]
この記述を加えることで、コンパイル時に自動でオートプレフィックスを付与してくれます!
すげー!!!
オートプレフィックスとは、IEやSafariなどに対応していないプロパティを、対応できるようにしてくれるすごいやつ。
「webkit」とか「ms」とか書いてあるやつですね!

今回オートプレフィックスについて、大雑把な設定をしているのですが、とりあえずはこれでOK
このブラウザではどのバージョンから〜などと、もっと細かく設定もできるのですが、困ってから設定を変更しても遅くないと思います。
こんなところを深堀して細かく設定するのなんて、後回しでOK
ささっと足をすすめていきましょう。
コンパイルしたcssファイルの保存先を設定する
それでは2つ目、こちらについての解説です。
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css/"
}
]
初期設定では、style.scssと同じディレクトリにstyle.cssが生成されます。
それだと実際の現場ではちょっと不都合というか、見づらいので、SCSSとCSSのファイルは別々のディレクトリで管理します。
この部分では、SCSSコンパイル時の、CSSの保存先と形式を設定する部分です。
SCSSファイルがどこにあろうと、所定の位置にCSSファイルをコンパイルしてくれます。
今回の設定では以下のようになっています。
- 「css」ディレクトリにstyle.cssを生成(2〜6行目)
- 「css」ディレクトリにstyle.min.cssを生成(7〜11行目)
2つも生成しなくていいよ!片方でいいよ!という方は、書いてある行数の部分をそのまま削除するだけでOK!
また保存先のディレクトリを変更したい場合は「”savePath”」の右側を任意のディレクトリに変更すればOKです。
style.min.cssとは、style.cssを圧縮したファイルです。
改行やセミコロン、コメントアウトが消滅しますが、その分読み込み速度が上昇します。
パソコンさんが読みやすくなる一方、私たち人間には読みづらくなります。
僕は「scss」というディレクトリを作成し、そこにSCSSファイルを入れて管理しています。
不要なコンパイルを除外する
3つ目、最後の設定です。
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
]
余計なファイルのコンパイルを防ぐための設定です。
特に触る必要はありません。
おまじないのようなものだと思っておいてください。
準備完了!レッツSCSS!
Live Sass Compilerをインストールし、初期にやっておくべき設定も完了しました。
これで意気揚々とSCSSデビューができます!
SCSSはCSSの上位互換のようなもので、記述効率上昇、メンテナンス性向上といいことづくし。
CSSは、完成したデザインを再現するための作業にすぎません。
作業は早く終えるに越したことはありませんよね!
この浮いた時間を、自分の好きなように使っていきましょう!
SCSSの書き方については、こちらになります。
今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。