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の書き方については、こちらになります。
今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。
