読者です 読者をやめる 読者になる 読者になる

ゆーすけべー日記

はてなBlogってどーなの!?

Twitter BootstrapをLESSでカスタマイズする環境をば

Twitter Bootstrap。せっかくなのでLESSでカスタマイズしつつ使うための手っ取り早い環境つくりについて。まず以下を入れておく。

  • OSXの文脈だけどhomebrewでnode
  • npmが使えるようになるのでRECESS

つまりこんな具合。

$ brew install node
$ npm install -g recess

次にBootstrapのGithubプロジェクトページからもしくはbower経由などでソースを引っ張ってくる。その後別ディレクトリでも切ってソース内の

  • fonts/
  • less/

ディレクトリだけ丸っとコピーしてくる。で、css/ ディレクトリをつくってrecessコマンドを利用してBootstrapのLESSファイルをコンパイル。CSSファイルとして書き出す。

$ recess ./less/bootstrap.less --compile > css/bootstrap.css

それをHTMLで呼び出せば基本はOK!あとはrecessの使い方を把握して、場合によって js/ ディレクトリをよしなにすると開発出来ますね!このくらいだったら朝飯前に出来たー!