HTMLマークアップを行うフロントエンドエンジニアならCSSを作成するのにSassやScssを使いこなせた方が良いということなので自身の復習もかねてまとめてみることにしました。

Sassとは

「Sass（サス、サース）」とは、CSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
条件分岐や繰り返し・変数などを利用したり、複数のファイルを１つにまとめて生成するなど、CSSファイルを作成するための便利な書き方になります。

Sassの種類

Sassを利用するためには、SCSS（scss）とSASS（sass）の二つの記法があります。
SCSS形式を利用するにはscssファイル、SASS形式はsassファイルに記述します。

CSSでの書き方

たとえば、下記のようなCSSのコードがあります。

body {
    background: blue;
}
body p {
    color: white;
}

このようなソースを書き出すには、scss・sassではそれぞれ下記のような書き方をします。

SCSSでの書き方

body {
    background: blue;
    p {
        color: white;
    }
}

SASSでの書き方

body
    background: blue;
    p
        color: white;

SCSSとSASSはどっちがいいの？

SCSSもSASSもSassの一部であり、機能的な違いはありません。
現在はSCSSが主流となっており、CSSに慣れている方にはSCSSがオススメです。
SASSは余計な記号を使わない分コードが簡潔になるので、そちらに慣れている方はSASSを選択しても良いでしょう。

チームでの開発の場合は、他の開発者の可読性を向上するためにも、皆が開発しやすい記法を選択すると良いと思います。

Sassの導入方法

SassはCSSファイルを生成するための言語なので、あくまで開発時に利用すればOKです。
Sassを利用するために使用したscssファイルやsassファイルは、サーバーにアップロードする必要はありません。

開発時にSassを使うための方法は下記の通りです。

Visual Studio Codeの 拡張機能を利用する

Visual Studio Code（以下、VSCode）にはSassを利用するための Live Sass Compiler という便利な拡張機能があります。
これを利用すると、プロジェクト内のSass関連ファイルを監視し、CSSファイルへのコンパイルを行ってくれます。

Live Sass Compiler インストール・利用方法

1. VSCodeの拡張機能でLive Sass Compiler を検索しインストールする
2. 拡張子[.scss]のファイルを作成する
3. エディタ右下あたりにある「Watch Sass」ボタンをクリックする
   
4. コンパイルが開始され、CSSファイルが生成される

Live Sass Compiler の設定例

VSCodeでは、プロジェクトのルートディレクトリに[.vscode/setting.json]というファイルを生成することで、プロジェクト毎に設定を変更できます。
自分が既存のプロジェクトでは、Live Sass Compiler関係の設定として、setting.jsonに下記の通り加筆しています。

[
    "liveSassCompile.settings.autoprefix": [

        "> 10%",          // 全体のユーザーの10%以上が使用しているブラウザバージョンに対応
        "last 2 versions" // 各ブラウザの最新2バージョンに対応
    ],
    "liveSassCompile.settings.excludeList": [
    //コンパイル対象から除外
        "/**/node_modules/**",
        "/.vscode/**",
        "/**/wp-admin/**",
    ],
    "liveSassCompile.settings.formats": [
    // コンパイル結果が確認しやすいフォーマット
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        },
    // 軽量化した読み込み用フォーマット
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css"
        }
    ],
    "liveSassCompile.settings.generateMap": true, //CSS Source Map を作成するか
]

最後に

Sassを使うための基礎の基礎知識的な備忘録でした。
これから復習もかねてSass関係の記事も上げていこうと思います。