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

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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 の記法を相互に変換する方法。

WEBサービスを使って変換

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

Sass to SCSS converter

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

sass-convert コマンドで変換

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

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

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

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

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

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

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

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!