この記事を書いた人
machida

休日なので軽い話題で。

SassやらHamlやらCoffeeやら

今、フィヨルドで作ってる怖話というサイトは、テーマ部分のマークアップはHaml、CSSはSass、JavaScriptはCoffeeScriptで書かれてます。

一度覚えてしまうとすごく書く文字数が減って、もう二度とHaml→HTMLなんて戻れなくなってしまうほど便利なのですが、例えば、FacebookのSocial Pluginでボタンやコメントを設置したいとこに、貼りつけコードをHamlにするのとか、頭で考えるのが面倒。いちいち黒い画面(ターミナル)からコマンドを打ってgenerateをするのも面倒です。

こういうときに便利なのが、ブラウザでペッと貼りつけて変換が出来るジェネレータがすごく便利。今回はそれらの紹介をしておきたいと思います。

JavaScript ←→ CoffeeScript

Js2coffee: convert JavaScript code to CoffeeScript

http://js2coffee.org/

HTML → Haml

HTML2Haml | Convert HTML Snippets to Haml

http://html2haml.heroku.com/

CSS → Sass/SCSS

css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

http://css2sass.heroku.com/

ついでに

HTMLのインデントを綺麗にする

ついでに手前味噌ですが、HTMLのインデントを綺麗にする、というジェネレータ。納品前のデザイナーやマークアップをする人用の便利ツール。

HTMLのインデントを綺麗にするサービス - Ham Cutlet

http://hamcutlet.fjord.jp/

これは実は、HTMLを一旦Hamlにして、またHTMLに戻すってことをサーバで行っています。

CSSのインデントを綺麗にする

SASSIENCE ~ 世界が嫉妬するCSSへ

http://sassience.com/

こちらはNekostagramや、宇多田ヒカループの作者としておなじみの@ruedapさん作。こちらも納品前のデザイナーやマークアップをする人には便利。

@ruedapさんのブログ、アインシュタインの電話番号☎はデザイナーにとっても役に立つプログラム情報が満載でオススメ!

最新の実績

  • Remember The Wordpress
  • happy1000days
  • happy1000days
  • happy1000days

こちらも合わせてどうぞ

  • webデザイナーの為の「本当は怖くない」“黒い画面”入門

アフィリエイト