インスパイヤー
FlashでいうパブリッシュのないHTML開発で、死なないためにやっといたらいいんじゃない的なこと。〜Ctrl+Enter Again〜
環境はmac(book air)
完全に自分用メモなので、あまり活用出来ないと思います
色々インストール編
Homebrewインストール
パッケージ管理ソフトはmacportsでも良い（wget入れるだけなので）けど後々考えるとこっちのほうが良いらしいので入れる
下記サイトの一番下の1文をターミナルにコピペしてドン
http://mxcl.github.com/homebrew/
% ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"
% brew -v <-- 入ってるかどうかの確認
wgetインストール
Node.jsのインストールに必要らしい
% brew install wget
% wget -v <-- 入ってるかどうかの確認
gitインスト…入ってたのでnvmインストール
nvmはNode.jsのインストール・バージョン管理・シェルの環境設定をやってくれる便利ツール
Githubのリポジトリをクローンする
% git clone git://github.com/creationix/nvm.git ~/.nvm
% source ~/.nvm/nvm.sh <--これやってるか不明。パスを通してる？？
% nvm -v <-- 入ってるかどうかの確認
nvmを使ってNode.jsをインストール
安定版(と聞いた)の0.8.14をnvmを使ってインストール
% nvm install v0.8.14
% nvm ls <--インストールしたものの確認
v0.8.14
current:
% nvm use v0.8.14 <--nodeの環境切り替え
Now using node v0.8.14
ここまでの参考:
Node.jsとnvmを初めてインストールするときのハマりポイントと対策
CoffeScriptのインストール
Node.jsはnpmというパッケージ管理ツールがある。
nvmをインストールするとnpmも使えるようになっている。
npmを使ってCoffeScriptのインストールが出来る。
% npm install -g coffee-script
% coffee -v <-- 入ってるかどうかの確認
SASS、Compassのインストール
既に入っていたのでupdateをかける
% sudo gem update sass
% sudo gem update compass
Compassを試す編
初期設定
SASSファイルやcssを置く予定のディレクトリ下で下記のコマンドを実行。
% compass create
directory sass/
directory stylesheets/
create config.rb
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
create stylesheets/ie.css
create stylesheets/print.css
create stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
<--以下略
とファイルが出来ます。
SASSファイルからCSSファイルを生成する
コンパイル or ウォッチ
% compass compile sass/style.scss <-- sassファイルをコンパイル
% compass watch sass/style.scss <-- sassファイルを監視して保存の度にコンパイル
% compass watch --output-style compressed sass/style.scss <-- 一行に圧縮
% compass w <-- sassディレクトリの中身を全部監視
ここまでの参考:
CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。
ディレクトリ全部監視させながらごりごりsass書くのが良いかと思います。
具体的な書き方は色んなサイトを参考に・・・
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
これのmixinとか実際に試せますね！
CoffeScriptその他の実行は次回…