CSSをSassに書き換えるために便利なツール2つ

業務でSass+Compassを使うことも多くなってきた昨今。

このブログもSassで運営したい。っていうか、Compassが使いたい！と思い立ち、ちまちま書き換え作業を行ってきました。ちまちま。

Sass+Compassって何よ？という方に、超絶わかりやすいスライドを。

変換に使ったツール

一つめ。まずはCSSを入れ子に。

定番ですが、普通のCSSをSassな入れ子型に書き換えてくれるツール。大概はこれでOKでしょう。

疑似クラスを入れ子にしてくれないので、その辺をちまちま修正しました。

ちゃんとCSSをかかない僕なので、セレクタへの指定があっちゃこっちゃ分散してまして、その辺を集める作業が大変でした。保守性を考えてCSSを書かないとダメですね。

二つ目。

htmlを放り込むだけでSassで使える形に整形してくれる神ツール。

ある程度は新しくSass用に書き直したので、divなり塊でポンと放り込んで終わりという手軽さが最高。

Sassでプロパティーを書いてないタグやセレクタコンパイルされたCSSには出力されないので、構造だけ把握したい時にさらに便利。

かつて使い方を書きました。

CSSのコーディングが光の速さになるかも知れない、っていうかなったwebジェネレーター「OneClickCSS」*prasm

上記二つのツールを使えば大概問題なくSass化出来ると思います。僕は出来ました。

CSSファイルの内容をまるっとscssにコピーしてもコンパイルは通ると思いますが、うまみはないので、やはりちまちま書き換えは必要ですね。

LESSとSCSS、どちらがいいのか？

LESSとSCSS、どっちゃがいいの？はいろいろ言われてますが、カジュアルに情報があつまるSassの方が僕には向いてました。

ちなみにwin環境な私、GUIコンパイラはコアラちゃん。

scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。 | ﾎﾎ冢次男

CSSの変更をするハードルが少し下がりました

いかがでしたでしょうか？

CSSで見た目をあれこれ変えるのが好きな私です。

それでもおんなじクラス何回も書いたり、いちいちベンダープレフィックスつけたり、1ファイルですべてのCSSを制御するには、そろそろしんどいし、限界かなぁと感じていました。

Sass+Compassを使うといままで不便だったなと思うポイントがうまいこと解消されていて、効率よく作業できて、気持ちがいいですね。

CSSがある程度書ければとりあえずSassを使うことは出来ると思うし、Sassの恩恵を感じられるとおもいます。

新しいプロジェクトでSassを使うのは簡単ですが、古いモノを環境移行するのは大変ですね。とはいえ、後々の管理効率を考えれば、今Sass化しておいて良かったと思う私です。

参考：これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG

文：シンタロヲフレッシュ

はてブ

pocket

twitter