Sass/SCSSコンパイルできるエディタ

ここで言う「エディタ」とは主にウェブ制作に従事する人が使うソフトウェアを指している。コーダー白書 2016 の使用エディタのアンケート結果 PDF(p.28)を参考にし、彼らがよく使うと思われるエディタと気まぐれで思いついたエディタを中心に調査した。

Sublime Text

Sass Build という ST 用のプラグインがあり、Install Packageから利用可能。gem install sassが必要。そしてすなわちコンパイラは Ruby Sass。おかげで Compass も利用できるが、2017 年も後半の後半に差しかかろうというイマドキにあえて Compass を選ぶ理由はない。

Sass Build

Atom

sass-autocompile という Atom 用のプラグインがあり、.sass/.scssファイルの保存時に自動的にコンパイルしてくれる。あらかじめ Node.js と node-sass をグローバルにインストールしておく必要があるのがひっかかるかもしれない。コンパイラは LibSass なので高速ではある。

sass-autocompile

Compass を使いたい人は Atom でターミナル実行するプラグインのatom-terminal-panelを使い、自前でコンパイルコマンドを叩く。まぁやりたい人はいないだろう。

Coda 2

Coda Sass Plugin がある。Ruby とgem install sassが必要。つまり Ruby Sass。**Coda 2 が手元にないのでこれから言うことは憶測だが、出力ファイル名を変更するオプションはないっぽい**。

Coda Sass Plugin

Vim

sass-compile.vim というのがあった、中身を見るにgem install sassが必要そう。

sass-compile.vim

Visual Studio Code

Configure Task Runner で tasks.json にコンパイルコマンドを記述する。こちらもあらかじめ Node.js と node-sass をグローバルインストールしておかなくてはならない。

CSS, Sass and Less | Visual Studio Code Docs - #Sass と Less を CSS に変換

と思ったら Live Sass Compiler と Easy Sass という 2 つのプラグインがあった。どちらも LibSass を元にした sass.js がコンパイラとなっている。Requirements など特にないので、Electron で作られているところの Visual Studio Code の内部の Node.js を使っているもよう。つまりプラグインを入れるだけで Sass/SCSS がコンパイルできる。ますぴっぴありがとう

Live Sass Compiler

Easy Sass

WebStorm

特にプラグインは必要なく、File Watcher を利用する。しかしコンパイラを自分でインストールしなければならない。メニューから Tools -> File Watchers を新規に作成し、Program やら Arguments やらを入力していく。

初期セットに Sass と SCSS があるが、これらの設定はコンパイラに Ruby Sass のパスが指定されている。Ruby Sass がない場合は何らかのエラー文が表示されていると思われる。その時はgem install sassが必要だ。

LibSass を使うこともできる。自分でインストールしてビルドし、そのパスを入力すればいいはずだ。軽くやってみたけどできなかった。お前たちは先に行け。おれは行けたら行く。

Compiling Sass, Less, and SCSS to CSS - Help | WebStorm

Brackets

brackets-sass と言うプラグインがある。Brackets は Node.js を同梱しているし、このプラグインに node-sass が含まれてる(厳密にはプラグインをインストール後のビルド時にnpm install node-sassが実行される)ので、プラグインをインストールしただけで Sass/SCSS コンパイルが可能になる。ソースファイルや出力先の設定は.brackets.jsonで指定する

brackets-sass

注意点がひとつ。brackets-sass の stable がコンパイルに利用するLibSass のバージョンは 3.1となっており、このバージョンの Ruby Sass との互換性は 50%を切っている

CLI でプラグインのディレクトリに移動して、node-sass をアップデートし、中の LibSass を 3.3.6(v3 系の最終バージョン)にすれば Ruby Sass との互換性も 100%になると思われる。しかしその場合の Brackets-sass の動作保証はできない。

Dreamweaver

CC(2017)から CSS プリプロセッサーのサポートが入ったので、Creative Cloud 版を使って入れば他は何もしなくてもプロジェクトルートをサイト管理しておけば Sass/SCSS コンパイルが可能。

コンパイラが何なのか気になって調べたけど確たる記述はすぐには見つからなかった。ただCompass や Burbon をサポートしていることから、おそらく Ruby Sass だろう

ソフトウェアをインストールして app ファイルの中身を grep したところ、/Contents/Resources/gems/rubygems/specifications/sass-3.4.19.gemspecがあった。つまり Ruby Sass であり、Sass のバージョンは 3.4.19 となる。そうさんありがとう。やっぱり空は青い。

一覧

エディター プラグイン コンパイラ あらかじめ必要なこと
Sublime Text Sass Build Ruby Sass gem install sass
Atom sass-autocompile LibSass npm install node-sass -g
Coda 2 Coda Sass Plugin Ruby Sass gem install sass
Vim sass-compile.vim Ruby Sass gem install sass
VSCode なし(taks.jsonに記述) LibSass npm install node-sass -g
VSCode Live Sass Compiler sass.js(LibSass) なし
VSCode Easy Sass sass.js(LibSass) なし
WebStorm なし(File Watcherで実行) Ruby Sass 初期テンプレートの場合は gem install sass
WebStorm なし(File Watcherで実行) LibSass LibSassのインストールとビルド
Brackets brackets-sass LibSass なし。ただし現時点のプラグインが利用してる LibSass が 3.1 で古い
Dreamweaver なし(サイト管理をする) Ruby Sass CC(2017)以上

gulp 使えやと言う話はここではしていない。

「とりあえずエディタだけ入れて Sass コンパイルしたい!」と思ったら、Dreamweaver CC(2017)しかなさそう。次点でプラグインを入れればコンパイル可能な Visual Studio Code、Brackets となるだろう。Brackets でやるとデフォルトの LibSass が古いのはちょっと気になる。それを更新しようとすると Node.js の環境がいる。他は全て黒い画面の干渉が必要になる。

他人のよくわからないマシンでとりあえず作業しなければならなくなった時、CLI は本当に障壁になる。人の環境がどうなっているかなんてわからないし、かといって壊すこともできない。

資料に載せる数行のエビデンスのために調べたけど、意外と面白い状況だった。


Ruby Sass はもうないでしょうという場合、エディタだけで Sass/SCSS コンパイルするのは諦めるしかない。Sass Meisterを使おう。でもファイル分割していたら全てを諦めよう。今日は空が青い。ファイル分割に対応できるウェブサービスがあった!  Filesystem タブで追加削除できる!  sass.js 最高! 梨うまい!


2017-09-10、VS Code のプラグインと Dreamweaver の内部の Sass のことを追記。それに伴い本文と一覧表を変更した。詳細な差分はGitHubを参照のこと。