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

公開日

2017-09-19

タグ

CSS

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

gulp 使えやという話はこの記事ではしない。

Sublime Text

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

Sass Build

Atom

あらかじめ Node.js と node-sass をグローバルにインストールしておく必要がある。

sass-autocompile という Atom 用のプラグインがあり、.sass/.scss ファイルの保存時に自動的にコンパイルしてくれる。コンパイラは LibSass なので高速だ。

sass-autocompile

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

かつて LibSass には互換性問題があったが、LibSass 3.3 で Ruby Sass 3.4 に 100% 対応したと謳っていので、その心配は不要だ。

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

Live Sass Compiler

Easy Sass

LLVMをJavaScriptにコンパイルできる[emscripten](https://github.com/kripken/emscripten)で[LibSassをJSに変換したものがsass.js](https://github.com/medialize/sass.js#sassjs)だそうだ。[ブラウザで読み込んで利用できる](https://github.com/medialize/sass.js/blob/master/docs/getting-started.md#using-sassjs-in-the-browser)らしい。

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 は Node.js を同梱しているエディタだ。

Brackets 向けには brackets-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 となる。そうさんありがとう。やっぱり空は青い。

一覧

「とりあえずエディタだけ入れて 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を参照のこと。