【VSCode】Sassを導入した話

Sassの存在を知る

SassだとかLessだとかは「スタイルシートをより簡潔に書けるよー」的な仕組みの事。どっちが良いのかは好みによるとは思うのだが、「会社でWEB屋やってるパイセンが使ってたから」という安直な理由で、俺もSassを使ってみる事にした。

こいつを使い始めてから結構経つのだが、個人的には全体的な記述量が減ってくれて、メンテしやすくなるのが一番ありがたい。まあ、ブラウザから直接Sass読めるわけじゃないので、コンパイルしてcssに吐き出さなあかんというのはちょっと面倒ではあるものの、それを上回るメリットは充分ある。

Sassの概要だとか書き方だとかそこらへんは他所様のサイトを見た方が参考になると思うので、ここでは割愛する。ここでは、俺が常日頃使ってるエディタであるVisual Studio Codeでのコンパイル環境を導入した(というか試行錯誤した)手順について遺しておこう。

node-sassのセットアップ

コンパイルするツールとしては、パイセンにおすすめしてもらった「node-sass」というやつを入れて使ってみた。もちろん、名前のとおり「node.js」を予めインストールして、npmを使える状態にしておく必要がある。

npm install -g node-sass

node-sassをグローバルインストールしておく。こうすることで、コマンドラインから「node-sass」が使えるようになる。

node-sass index.scss index.css

こうすれば、index.scssをコンパイルして、index.cssを吐き出しますよってな感じになる。

node-sass --output-style compressed index.scss index.css

ファイル容量は少なければ少ないほど良いので「–output style compressed」を追加しておく。こうすると、空白やら改行やらがぶっこ抜かれてギチギチに詰まったスタイルシートが出力されるようになる。どうせコンパイル後のブツなんて目視しないし、問題無いっしょ。

VSCodeでタスクを作る

とりまnode-sassは動かせたので、次はVSCode上から動かしてみよう。

・「Ctrl+Shift+P」でコマンド欄を表示。
・「タスクの実行 Tasks:Run Task」を選択してEnter。
・「実行するタスクがありません。タスクを構成する…」とか表示されるのでそのままEnter。
・「テンプレートからtasks.jsonを生成」とか表示されるのでそのままEnter。
・「Others 任意の外部コマンドをなんちゃら」とかいうのを選んでEnter。
こうすることで、「.vscode」フォルダ以下に「tasks.json」が生成される。

{
   // See https://go.microsoft.com/fwlink/?LinkId=733558
   // for the documentation about the tasks.json format
   "version": "2.0.0",
   "tasks": [
       {
           "label": "echo",
           "type": "shell",
           "command": "echo Hello"
       }
   ]
}

中身はこんなん。このままだと、タスクを実行してもターミナルに「Hello」と表示されるだけなので、node-sassが動くように弄ってみる。

{
   // See https://go.microsoft.com/fwlink/?LinkId=733558
   // for the documentation about the tasks.json format
   "version": "2.0.0",
   "tasks": [
       {
           "label": "build-sass",
           "type": "shell",
           "command": "node-sass --output-style compressed index.scss index.css"
       }
   ]
}

さっきと同じく「Ctrl+Shift+P」でコマンド欄だしてEnterキーをポンポン連打してると、「build-sass」タスクが実行されてindex.scssから、index.cssが生成される。やったぜ。

node-sass -w --output-style compressed index.scss index.css

ちなみに、こんな感じで「-w」をつけとくと、scssを更新するたびにcss吐き出してくれるので便利わよ。