Sassとは - コーディング

Sass（サースまたはサス）

Syntactically Awesome Stylesheets（構造的にイケてるスタイルシート）
CSSをより構造的に整理して記述することができる、CSSの「メタ言語（拡張言語）」
メタ言語とは「ある言語について何らかの記述をするための言語」のこと

Sassの記法

「SASS」記法
「SCSS」記法（現在主流の記法）

なぜSassで記述するか

コーディングの速度がアップする
- コードがシンプルになる
- 変数が使える
- コードを使い回しができる
- if文やwhile文が使える
- 四則演算が使える
メンテナンスしやすくなる

Sassの導入方法

SassからコンパイルしてCSSに変換する必要があります（Sassそのものは、ブラウザ側で理解できないため）
コマンドを使ってコンパイル
1. LibSassを使ってコンパイル（node-sassというライブラリを使う方法）
2. Ruby Sassを使ってコンパイル（Rubyを使ってSassをコンパイルする方法）
GUIコンパイラを使ってコンパイル
1. GUI コンパイラを使ってコンパイル（コマンドを使わずにマウス操作でSassのコンパイルを行う方法）

Playgroundを使う

学習目的の場合、Playgroundを使うことによりコンパイル結果が確認できます

www.sassmeister.com

VS Code - Live Sass Compiler（Glenn Marks）

拡張機能
2022年12月時点で、「DartJS Sass Compiler and Sass Watcher」より使い勝手がよい

「style.scss」と同一階層に「style.css」ファイルを作成する場合

    "liveSassCompile.settings.autoprefix": [
      "> 3% in JP",
      "last 2 versions"
    ],
    "liveSassCompile.settings.forceBaseDirectory": "",
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": ""
        }
    ],
    "liveSassCompile.settings.watchOnLaunch": true

「scss」フォルダー外に「css」フォルダーを作成する場合

ルートパスで「/css」と記述する

    "liveSassCompile.settings.autoprefix": [
      "> 3% in JP",
      "last 2 versions"
    ],
    "liveSassCompile.settings.forceBaseDirectory": "",
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.watchOnLaunch": true