Sass環境を整えるためにrbenv+ruby-build+bundlerしたメモ

ruby css

LessよりSassの方がいい？

よくわかんないけど、Sassだとインデントで記述できてたのしそう！ってことで調べた。
Sass(Scss)ってこんな感じです
Sass - チュートリアル

UbuntuやMacだったらパッケージがあるっぽい

sudo apt-get install libhaml-ruby1.8

詳しくはわからないので、まあ勉強がてらに環境構築することにします。

最近はrvm+gemsetよりrbenv+ruby-build+bundlerが旬らしい

てっきりrvmだと思ってた。「rvmはオワコンや……」って誰かが言ってた気がしたけど普段Virtualenvの中で暮らしているのであんまりよく知らなかった。
以下、ほとんどこの記事と同じです
rbenvでrailsの動作環境を構築 - 吾輩のメモである

rbenvでrubyのバージョン管理をする環境をつくる

公式のgithubはこれです
sstephenson/rbenv · GitHub

git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc

そのまんまです。githubからcloneしてpathをとおしてあげてなんか初期化のおまじないをする感じですね

ruby-buildで .rbenv 上の環境に構築するようにする

git clone git://github.com/sstephenson/ruby-build.git
cd ruby-build
sudo ./install.sh

これで /usr/local/bin に ruby-build が入りました。これで .rbenv 上の操作がやりやすくなる

rbenv install VERSION でrubyをインストールする

rbenv install
#atasatamatara@vm:~$ rbenv install
#usage: rbenv install VERSION
#      rbenv install /path/to/definition
#
#Available versions:
# 1.8.6-p383
# 1.8.6-p420
# 1.8.7-p249
# 1.8.7-p302
# 1.8.7-p334
# 1.8.7-p352
# 1.8.7-p357
# 1.8.7-p358
# 1.9.1-p378
# 1.9.2-p180
# 1.9.2-p290
# 1.9.2-p318
# 1.9.3-dev
# 1.9.3-p0
# 1.9.3-p125
# 1.9.3-preview1
# 1.9.3-rc1
# 2.0.0-dev
# jruby-1.6.3
# jruby-1.6.4
# jruby-1.6.5
# jruby-1.6.5.1
# jruby-1.6.6
# jruby-1.6.7
# jruby-1.7.0-dev
# maglev-1.0.0
# rbx-1.2.4
# rbx-2.0.0-dev
# ree-1.8.6-2009.06
# ree-1.8.7-2009.09
# ree-1.8.7-2010.01
# ree-1.8.7-2010.02
# ree-1.8.7-2011.03
# ree-1.8.7-2011.12
# ree-1.8.7-2012.01
# ree-1.8.7-2012.02

今回は 1.9.3-rc1にします。ついでにglobalに設定。 global に設定した後 .rbenv 上で消した場合、 ~/rbenv.version あたりを適当に消す必要があります 

rbenv install 1.9.3-rc1
rbenv global 1.9.3-rc1

ここらへんについての他の参考
rbenv - こしごぇ
rbenv + ruby-buildのインストール方法 - 223 Software
ブログが見つかりません

bundlerをいれる

rbenv exec gem install bundler
rbenv rehash

たぶん .rbenv のグローバルっぽいところにきっとbundlerがはいる(間違ってたら教えて下さい)。rehashってのをしないとインストールしたモジュールが更新されないらしい。

bundlerでSassをいれる

普通はここでRailsをいれる、っていうかもうRuby自体がRailsの存在が大きすぎてあれすぎる？
他の資料ではhamlでSassができるって書いてあったりもしたけれど、現時点ではSassってgemを直接入れないといけないっぽい。
こんな感じでGemfileをつくる

mkdir sample
cd sample
cat >> Gemfile <<EOF
source "http://rubygems.org"

gem "sass"

EOF

インストール。pathを vendor/budle みたいにサンドボックスっぽいところにいれる？

rbenv exec bundle install --path vendor/bundle

これでいちおうはいった(ような気がする)。肝心のSassは

bundle exec sass

これでうごくっぽい。適当なサンプルを食わせてみる

.link
   :color #0080DD

これを bundle exec sass hoge.sassする。と、

.link {
   color: #0080dd; }

こんなかんじで標準出力される。bundle exec sass hoge.sass >> hoge.css すれば生成できますね

長かった

でもまあやり方がわかればたいしたことはないのですね。Sassならインデントでかけてうれしいなーって思うけど、ここまでするなら別にLessでもいいかなーという感じでもあります。

追記

でもSassには --wtachというのがあって、書き換えたものを動的に出力してくれるらしい
File: SASS_REFERENCE

bundle exec sass --watch input.sass:output.sass
bundle exec sass --watch sass_directory:css_directory

これは便利だね！