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
Live Sass Compiler sass.js(LibSass) なし
Easy Sass sass.js(LibSass) なし
WebStorm なし(File Watcherで実行) Ruby Sass 初期テンプレートの場合は
gem install sass
なし(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を参照のこと。