Learning site for website creation

SassをVSCodeで使用する方法

  • 投稿日:2020年10月14日

「Sass:Syntactically Awesome StyleSheet」はCSSのメタ言語(対象言語を一段高い次元から論じる言語)です。

  • Syntactically = 文法的に
  • Awesome = 素敵な
  • StyleSheet = スタイルシート

ざっくり言うとCSSを効率的に記述するための言語。

SASS記法とSCSS記法

  • 拡張子「.sass」を使用する「SASS記法」:元からある記法
  • 拡張子「.scss」を使用する「SCSS記法」:後から追加された記法

CSSと近い記述をするSCSSが主流になっている。

VSCodeにSassを導入する

Sass用拡張機能をインストール

Live Sass Compiler

Sass利用準備

  1. CSSファイル保存用フォルダを作成
  2. CSSフォルダ内に拡張子「.scss」のSassファイル作成

Sassのコンパイラを起動

SassではSCSS記法で記述した「Sassファイル」から「CSSファイル」を生成します。SassファイルからCSSファイルを生成することを「コンパイル」と呼びます。

このコンパイルをSassファイル保存時に実行させる為、VSCode右下の「Watch Sass」をクリックしてコンパイラを起動します。

「Watch Sass」から「Watching...」に表示が変わればコンパイラが起動しています。

コンパイラが起動すると「CSSファイル」と「ソースマップファイル」が生成されます。

ソースマップファイル:ファイル名.css.map

Sassファイルとコンパイルによって生成されたCSSファイルの行番号をマッピング管理しているファイルです。このマップファイルによってChrome検証ツールなどでSassファイルの記述位置が表示されます。

※ただし複雑な構成だとマッピングがずれて正しく表示されないことあり

SassファイルからCSSファイルを生成

Sassのコンパイラが起動していれば「Sassファイル」保存時、自動的にCSSファイルを生成します。

Sassの設定変更

左メニューから「拡張機能」を選択

「Live Sass Compiler」の右下にある歯車をクリック

どこを対象に設定変更するか「ユーザ」「ワークスペース」から選択します。

対象を選択した後、「settings.json で編集」をクリック

今回は「ワークスペース」を選択した場合

JSON形式で記述されたワークスペース用の設定を変更。
※Sassだけの設定ではなくワークスペース全体の設定ファイルにSass用設定を追記します

{
	"folders": [
		{
			"path": "."
		}
  ],
  "settings": {
    "liveSassCompile.settings.excludeList": [
    
      "**/node_modules/**",
      ".vscode/**"
    ]
  }
}

よく使う設定

{
  // VSCodeワークスペースルートフォルダ
  "folders": [
    {
      "path": "."
    }
  ],
  // VSCodeワークスペース用各種設定
  "settings": {
    // Sass用設定を追記
    // Sassのコンパイルによる出力設定
    "liveSassCompile.settings.formats": [
      {
        "format": "expanded", // 「nested」「compact」「compressed」から選択
        "extensionName": ".css", // 拡張子「.css」として出力
        "savePath": null // 別フォルダに出力する場合は文字列で指定
      }
    ],
    // Sassのコンパイル監視対象外とするフォルダを指定
    "liveSassCompile.settings.excludeList": [
      "**/node_modules/**",
      ".vscode/**",
      ".history/**"
    ]
  }
}

liveSassCompile.settings.formats

コンパイルで生成するCSSファイルの「フォーマット」・「拡張子」・「保存場所」を設定します。

format

出力するCSSファイルのフォーマットを以下から指定します。

「expanded(初期値)」「compact」「compressed」「nested」

SCSS

p {
  font-size: 30px;

  span {
    color: red;
  }
}

出力されたCSSファイル

/* expanded */
p {
  font-size: 30px;
}

p span {
  color: red;
}

/* compact */
p { font-size: 30px; }

p span { color: red; }

/* compressed */
p{font-size:30px}p span{color:red}

/* nested */
p {
  font-size: 30px; }
  p span {
    color: red; }

extensionName

出力するCSSファイルの拡張子を指定します。

formatで「compressed」を指定した際に、圧縮ファイルであることを明示した「.min.css」を指定することが多いです。

savePath

保存場所のパスを指定します。初期値は「null」でSassファイルと同じフォルダにCSSファイルを出力します。

先頭「/」でパスを記述するとワークスペースをrootとして出力先を指定できます。

例)「/css/」

先頭「~」でパスを記述するとSassファイルを起点に出力先を指定できます。

例)「~/../css/」

liveSassCompile.settings.excludeList

Sassのコンパイル監視対象外とするフォルダを指定します。

任意の0文字以上の文字列を意味する「*」などのGlobパターンを使用できます。