【CSS】VSCodeでSassコンパイル

VSCodeでSassコンパイルする

最近ではもう手放せなくなっている高機能エディタ「Visual Studio Code(VSCode)」。

拡張機能を追加することで、どんな開発にも対応できるのが便利すぎて他に浮気できないくらい。

今回はVSCodeを使ってSassコンパイルを行う方法をメモ。

  1. Sassとは?(おさらい)
  2. VSCodeでSassコンパイルする

Sassとは?

VSCodeでのコンパイル云々に入る前に、おさらい。

Sass: Syntactically Awesome StyleSheet
https://sass-lang.com/

Sassとは、Syntactically Awesome StyleSheetの略で、翻訳すると「構文的に素晴らしいスタイルシート」となる。

開発現場ではscssとかsassとかを総じて「サス」「サース」とか言われる。
それぞれの言葉の意味を整理する。

Sass
CSSを拡張したスクリプト言語およびコンパイラ。
コンパイルすることで.cssファイルを生成できる。
sass
Sassで使用できる構文のひとつ。拡張子は「.sass」。インデント構文。
scss
Sassで使用できる構文のひとつ。拡張子は「.scss」。ブロック書式。

sassとscssの違い

Sassにとって、scssの方が新しい構文となっており、開発現場ではこちらが利用されることが多い。
そもそも公式サイトでもscssの記法ばかり説明されていて、少しsassが可哀相…。

それぞれの書き方の違いを見てみる。

scss

$red: #f66;

.sample1 {
  color: $red;
  font-weight: bold;
}

.sample2 {
  border: 1px solid $red;
}

sass

$red: #f66

.sample1
  color: $red
  font-weight: bold

.sample2
  border: 1px solid $red

上記の通り、scssは基本的にcssと書き方は同じで、Sassの機能を利用できる。

sassはシンプルに記載できるが、cssとは少し書き方が異なるので慣れが必要。

個人的には、制御構文を使うなら、sassの方が書きやすいし見やすい。でも主流はscssなんだよな…。

Sassの機能

SassはひとことでいうとCSSをプログラムできるやつ

言葉としておかしい気もするけど、そこは感覚的なアレで。

プログラムと考えると、できることと言えばつまりこういうこと。

  • 変数が使える
  • 制御構文が使える
  • ミックスイン…関数っぽいやつが使える

これ以上は本題じゃないので割愛。使えば分かるし。

VSCodeでSassコンパイルする

Sassを環境にインストールすると、.sassや.scssファイルのコンパイル(.cssファイルへの変換)が可能になる。

VSCodeを使っていると、拡張機能のインストールだけで準備は整う。

拡張機能のインストール

VSCode拡張機能で「sass」を検索

Market Placeで検索すると、ズラーッといっぱい出てくる。

ブログとかでよく紹介されている「Live Sass Compiler」は、sass/scssファイルを自動でコンパイルしてくれる優れもの。

最終更新が2018年11月と古いのが気になるけど、便利なのでこちらをインストールする。

Live Sass Compilerの設定

インストールして、VSCode下部にある「Watch Sass」をクリックすると、ワークスペース内を自動でサーチしてコンパイルを開始してくれる。

小規模ソースならそれでもいいけど、すでに大量のソースがある場合、関係ないファイルまでコンパイルされてしまうので設定を行う。

settings.jsonを開き、以下の記述で対象外とするディレクトリを指定する。

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

これでSassのコンパイル環境がVSCodeで実装できた。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のPG・SEを経て、独立。 現在はとある企業のCTOと、変な名前の会社の社長をしてる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください