初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
HTML/CSS

【Sass】SCSSの使い方!VSCodeにプラグインをインストールし環境を整える方法

SCSSの準備方法!SCSSで記述していくための準備をしよう!

SCSSとはSassの1種で、簡単に言うと「CSSの上位互換」のようなものです。

SCSSのここがすごい!
  • CSSの記述が楽になり、作業効率が爆上がりする
  • 後から見てもわかりやすく、メンテナンス性が高い
  • 記述方法が似ているため、学習コストが低い

使い方の流れは以下のようになります。

  1. SCSSを使える環境にする
  2. SCSSで記述していく
  3. CSSに変換する(自動)
  4. 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を見てみると、見事にコンパイルされていますね!

VSCode起動時には毎回「Watch Sass」をクリックする必要があります。

プラグインの基本的な使い方はこれにて終了。

ただ、もう少しだけ便利にするために設定を触っていきましょう。

すぐ終わりますのでご安心ください!

Live Sass Compilerで最初にやっておきたい設定

四の五言わずにまずは設定方法から!解説は後回しじゃ!

まずは以下の手順でLive Sass Compilerの設定編集画面まで進んでください

  1. VSCodeサイドメニューの拡張機能アイコンをクリック
  2. 「Live Sass Compiler」の歯車アイコンをクリック
  3. 拡張機能の設定」をクリック

すると訳のわからないイングリッシュまみれの画面が出てきます。

そこを恐れずに「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.min.cssとは、style.cssを圧縮したファイルです。
改行やセミコロン、コメントアウトが消滅しますが、その分読み込み速度が上昇します。
パソコンさんが読みやすくなる一方、私たち人間には読みづらくなります。

僕は「scss」というディレクトリを作成し、そこにSCSSファイルを入れて管理しています。

不要なコンパイルを除外する

3つ目、最後の設定です。

"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
]

余計なファイルのコンパイルを防ぐための設定です。
特に触る必要はありません。

おまじないのようなものだと思っておいてください。

準備完了!レッツSCSS!

Live Sass Compilerをインストールし、初期にやっておくべき設定も完了しました。

これで意気揚々とSCSSデビューができます!

SCSSはCSSの上位互換のようなもので、記述効率上昇、メンテナンス性向上といいことづくし。

CSSは、完成したデザインを再現するための作業にすぎません。

作業は早く終えるに越したことはありませんよね!

この浮いた時間を、自分の好きなように使っていきましょう!

SCSSの書き方については、こちらになります。

今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。