OOCSSをbuildする

ちょいーんっす！あたーんっす！

みなさん、OOCSSって知ってますか？僕は知らないです。嘘です。

@stubbornellaが、4,5年前に言い出したオブジェクト指向なCSSの考え方みたいなもんです。CSSでこんなもの表現できた！とかそうゆうTips系の話題は事欠かないのですが、CSSの設計についての話はそれ以前には（今もそうですが）あまりなかったので、個人的にはとても衝撃的でした。

• ちゃんとCSSを書くために - CSS/Sass設計の話（あ、最近イカス資料見つけたぞ！）

新しくなったドキュメントを読みたいのですが、Readmeを読むと、どうやらSassやらHandlebarsやら使っててbuildしなきゃいけないっぽいす。んで仮想環境をVagrantで提供してるとのこと。

なんと！俺はただCSSのドキュメントを読みたいだけなのに、めんどくせ(๑･ิω･ิ๑)yー～

と言っててもしょうがないのでがんばってみる。

事前インストール

• Git (多分入ってると思うけど…)
• VirtualBox (現状、4.2.14やめて、4.2.12を選択しとく)
• Vagrant (gemでインスコしたことある人はアンスコしとく)

OOCSSをbuild

git clone https://github.com/{user_name}/oocss.git

Cloning into 'oocss'...
remote: Counting objects: 1800, done.
remote: Compressing objects: 100% (1261/1261), done.
remote: Total 1800 (delta 580), reused 1626 (delta 445)
Receiving objects: 100% (1800/1800), 1.53 MiB | 121.00 KiB/s, done.
Resolving deltas: 100% (580/580), done.

ForkしたのをCloneしてくる

cd oocss/oocss

Vagrantfileのある場所に移動する

$ vagrant up

Bringing machine 'default' up with 'virtualbox' provider...
[default] Box 'stubbornella' was not found. Fetching box from specified URL for
the provider 'virtualbox'. Note that if the URL does not have
a box for this provider, you should interrupt Vagrant now and add
the box yourself. Otherwise Vagrant will attempt to download the
full box prior to discovering this error.
Downloading or copying the box...
Extracting box...te: 206k/s, Estimated time remaining: 0:00:01))
Successfully added box 'stubbornella' with provider 'virtualbox'!
[default] Importing base box 'stubbornella'...

vagrant upで起動させる

$ vagrant ssh

vagrant sshで中に入る

vagrant@lucid32:/vagrant$ make build

##################################################
Clean the project
##################################################
Removing the build directory
cleaning compass files...
Remove Node modules
##################################################
Clean project                               ✔ Done
##################################################

##################################################
Building OOCSS...
##################################################


##################################################
Building CSS Files with Sass...

##################################################
Building Documentation...
##################################################

Build done at : Fri Jun 28 2013 20:36:15 GMT+0200 (CEST)

##################################################
##################################################

OOCSS Build                                 ✔ Done
##################################################

makeする

http://localhost:8080/docs/library.html にアクセスしてドキュメントみる。わーい見れた！

$ vagrant halt