うまい話とジェットコースターには乗るなって言ってたばあちゃんの知恵袋だけど、Sassに含まれているsass-convertコマンドを使うと.sass形式と.scss形式を相互に変換できる。

$ gem i sass
$ sass -v
Sass 3.2.11 (Media Mark)
$ sass-convert --help
Usage: sass-convert [options] [INPUT] [OUTPUT]

(snip)

これを使って、以下は現在のフォルダの.sassを.scssに一括で変換する場合。自分の好みで普段書いているのは.sass形式なんだけど、納品物やチームで使っているのは.scss形式ってことがままあるため、そういう時に使う。

$ sass-convert -F sass -T scss . -R
$ rm *.sass

自分の場合、今開いてるファイルを.sass形式から.scss形式に変換するというのも必要で、その時はVimのコマンドモードからバッファに対して以下のコマンドを実行する。

:%!sass-convert -F sass -T scss

これらのコマンド一発でサクッと変換できちゃうのでとても重宝している。さらに応用で、今書いている.sass/.scssのコードを機械的にカチッと整形したい時にもこれを利用する。オプションのFromとToを同じにしてあげればよい。これでフォーマットされる。ただし、これはあくまで変換の流用で、コード整形のための機能ではないので注意されたし。

:%!sass-convert -F sass -T sass

これはこまめに実行するコマンドなので.vimrcに書いてすぐ呼び出せるようにしている。末尾に<CR>を付けてないのは、オプションを手動で変えたい時にも対応するために。

nnoremap <Leader>sass :<C-u>%!sass-convert -F sass -T sass

変換の挙動

sass-convertコマンドの変換は優秀な感じで、これを使っていて困ったことはあまりないんだけど、例えば以下のような挙動をするので場合によっては使えないかもしれない。

• カラーコードがカラーネームに変わる #000000 → black
• カラーコードに含まれるアルファベットが小文字になる #EEEEEE → #eeeeee
• 3桁のカラーコードが6桁に変わる #9cf → #99ccff
• シングルクォートがダブルクォートに変わる 'hoge' → "hoge"
• 演算での省略できるカッコは削除される -(1) → -1
• 省略できる小数点以下は削除される 1.0 → 1
• でもゼロを省略した少数はゼロが追加される .1 → 0.1
• 2行以上の空行が1行にまとめられる
• 最後に記述された行より下にある空行は削除される

中でも、カラーコード#000000がカラーネームblackに変わってしまうのは、自分でも使っていてちょっと微妙だとは感じていて、Sass 3.2以降だとその対象は147種類もあって、例えば#fafad2はlightgoldenrodyellowに変換される。わかりづらい使いづらい長い。

なのではじめのうちは、変換前後のdiffを毎回見てどういう挙動をしているのかをチェックしたほうが良さそう。Sassのバージョン間でも違いがあるかもしれない。

ちなみに前述のカラーネームの仕様などは、Sass入門という書籍を読んでいた時に知った。買ったのはSass 3.1の頃だったんだけど、その後にリリースされた3.2に対して1章分の加筆をするなど、電子書籍らしい粋なアップデートをしてくれたので好感度が高い。