CSSをより効率よく書くためにSASS／SCSSを使っている方はたくさんいるかと思います。
私もそうなのですが、引き継ぎ案件など行う際にこんな事を感じます。
普段はSCSSだからCSSのデータしかない案件もSCSSでやりたいな…
逆コンパイルってできないの？
そんな時はCSSをSASS／SCSSに変換できるツールを使えば便利です。
実際に使用したレビューもお伝えします。
CSSをSASS／SCSSに変換するツール
とてもシンプルなサイトです。こちらで変換できます。
手順
1．変換したいCSSを自身のエディターで開き、コピーする。
2．コピーしたものを変換ツール画面左側のCSSと書かれたエリアにペーストする。
3．左のCSSエリア上部右に「Convert to SCSS」と「Convert to SASS」のボタンが並んでいるのでどちらか選択して変換します。
私はSCSSなのでそちらを選択しました。
これだけで右側のSASS / SCSSと書かれたエリアに変換されたコードが出ました！
これをまるっとコピーして使用しましょう。
実際に使用したレビュー
インデントのスペースについて
スペース2つ分でした。こちらは社内ルールや個人的ルールによるかもしれませんが、Googleではスペース2つが推奨されているようです。Google HTML/CSS Style Guide General Formatting Rules
改行位置について
閉じ括弧の下は1行空きました。こちらも社内ルールや個人的ルールによりますね。ちなみに私は閉じ括弧の下は空けない環境にいました笑
子スタイルの上は1行空いていたので見やすかったです。
変換結果
コード内のコメントについて
コメントもしっかり反映されていました。コメントの下も1行空くようです。
変換結果
まとめ
社内ルールや個人的ルールなど環境に合わせたいところはありますが、スタイルを追加したい時などこのツールでCSSをSASS／SCSSに変換すれば、スタイルの影響範囲も見やすくなって作業効率がアップします。
ソフトのダウンロードも会員登録も無いですし、とても簡単な手順で使用できるのでおすすめのツールです！
