ITエンジニア/デザイナ向けにオープンソースを毎日紹介

今までの書き方からどう変わるのか見てみましょう。

HTML/JavaScriptそしてスタイルシートはここ数年で代替記法がたくさん登場しています。個人的にはHamlやJadeはきついなぁと思ってしまうのですが、CoffeeScriptのようにコーディングがとても楽になる言語もあります。

スタイルシートにおいてはSassおよびScssが有名ではないかと思います。始めてみたいなと思う方はまずは自分の書いたCSSをSass/Scssにするとどういう記述になるのか確認してみるのが良いでしょう。それがcss2sassです。

css2sassの使い方

css2sassではデモのWebサイトが用意されています。

CSSをScssに変換しました。ミニファイされていた内容が綺麗になるのも良いですね。
CSSをScssに変換しました。ミニファイされていた内容が綺麗になるのも良いですね。

こちらはSass。括弧がなくなるので読みやすくなりますね。
こちらはSass。括弧がなくなるので読みやすくなりますね。

スタイルシート全体の内容を変換するのはもちろん、一部のスニペットを変換して取り込むのも良さそうです。これまでの記述とどう変わるのかチェックするのに最適でしょう。

css2sassはRuby/Sinatra製のオープンソース・ソフトウェア(MIT License)です。

css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

jpablobr/css2sass

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2