CSSをSASS/SCSSにオンラインで変換するツールで効率化!

CSSをより効率よく書くためにSASS/SCSSを使っている方はたくさんいるかと思います。

私もそうなのですが、引き継ぎ案件など行う際にこんな事を感じます。

制作者
制作者

普段はSCSSだからCSSのデータしかない案件もSCSSでやりたいな…

逆コンパイルってできないの?

そんな時はCSSをSASS/SCSSに変換できるツールを使えば便利です。

実際に使用したレビューもお伝えします。

CSSをSASS/SCSSに変換するツール

CSS 2 SASS/SCSS CONVERTER

こちらのサイトならオンラインで変換できます。

手順

1.変換したいCSSを自身のエディターで開き、コピーする。

エディターの操作画面

2.コピーしたものを変換ツール画面左側のCSSと書かれたエリアにペーストする。

変換ツールの操作画面

3.真ん中の矢印ボタンにカーソルを合わせるとSASSかSCSSかを選択できるので、選択する。

私の場合はSCSSなのでそちらを選択しました。

変換ツールの操作画面

これだけで右側のSASS / SCSSと書かれたエリアに変換されたコードが出ました!

変換ツールの操作画面

これをまるっとコピーして使用しましょう。

実際に使用したレビュー

インデントのスペースについて

スペース4つ分でした。こちらは社内ルールや個人的ルールによるところですね。設定で選べるとより良いと感じましたが、自身のエディターにペーストした後一括変換で直せるかと思います。

改行位置について

閉じ括弧の下は1行空きました。こちらも社内ルールや個人的ルールによりますね。ちなみに私は閉じ括弧の下は空けない環境にいました笑

子スタイルの上は1行空いていたので見やすかったです。

変換結果

変換ツールの操作画面

コード内のコメントについて

コメントもしっかり反映されていました。コメントの下も1行空くようです。

変換結果

まとめ

社内ルールや個人的ルールなど環境に合わせたいところはありますが、ちょっとスタイルを追加したい時などこのツールでCSSをSASS/SCSSに変換すれば、スタイルの影響範囲も見やすくなって作業効率がアップします。

ソフトのダウンロードも会員登録も無いですし、とても簡単な手順で使用できるのでおすすめのツールです!