SassとSCSSを変換するsass-convertコマンドとウェブサービス

CSS での Sass 記法と SCSS 記法では記法が異なるので、移行する場合にはコンバート（変換）が必要となる。記法を相互に変換するために、ウェブサービスを使う方法と、sass-convert コマンドを使う方法を試してみまして、どちらも上手くいきました。

— 環境 —
Sass 3.4.18
Mac OS X Yosemite

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

Sass と SCSS の記法の違い

Sass と SCSS の記法には具体的には以下のような違いがあります。

— Sass —
拡張子が .sass
インデントでブロックを表す
行末の ;（セミコロン）が不要
:（コロン）の後に半角スペースが必要
ミックスインは = で表現
インクルードは + で表現

— SCSS —
拡張子が .scss
{} でブロックを表す
行末に ;（セミコロン）が必要
:（コロン）の後の半角スペースが不要
ミックスインは @mixin で表現
インクルードは @include で表現

記法はかなり似ていますので、少ない行数の変換なら手作業で修正でも良いかもです。が、行数やファイル数が多ければ、変換ツールを使ったほうが楽かと。

ちなみに個人的には、Rails プロジェクトの場合 scss & erb の組み合わせのほうが好みです。sass & slim/haml だとインデントのおかげで行数は少なくできるのだけど、ぱっと見てどこからどこまでが一塊のブロックかを把握しづらい感じがしまして…。

さてと、では本題の Sass と SCSS の記法を相互に変換する方法。

使ったウェブサービスは以下。

Sass to SCSS converter

コピペするだけで相互に変換してくれるので、超お手軽です。

※ Sass to SCSS converter はサービスが終了したようでリンクを外しました。

知らなかったのだけど、Sass をインストールすると sass-convert コマンドが使えるようになるそうです。sass の gem をインストールした時に同時にインストールされたのか、rbenv 環境ですけど sass-convert コマンドが入ってました。


$ which sass-convert
/Users/user_name/.rbenv/shims/sass-convert

$ which sass-convert

/Users/user_name/.rbenv/shims/sass-convert

sass-convert コマンドがない場合は…


$ gem install sass
$ rbenv rehash  # rbenv 環境でないなら不要

$ gem install sass

$ rbenv rehash # rbenv 環境でないなら不要

とかすれば多分入るかと思います。

Sass 記法で書かれた source.sass を SCSS 記法に変換するには、以下のようにする。


$ sass-convert source.sass target.scss

$ sass-convert source.sass target.scss

これで SCSS 記法に変換された target.scss というファイルが作成されます。拡張子で判断されるっぽくて賢い。

逆に SCSS 記法で書かれた source.scss を Sass 記法に変換するには以下。


$ sass-convert source.scss target.sass

$ sass-convert source.scss target.sass

これで Sass 記法に変換された target.sass というファイルが作成されます。簡単で助かりますね。

私は CSS がちょっと苦手なので勉強せねば...