CSSをもっと便利に – はじめてのSass。
Saasじゃないですよ。Sass です。
とはいえ「なんだそれ？？？」って思って検索しても情報が少ないんですよね…。(2010年10月7日現在)
で、なぜまたそんなよくわからないものに手を出したかというと、どうやら「CSS書くのにSassが使えると幸せになれるらしい」のです。
とはいえ、これじゃ具体的にどんな風にヨイのかがよくわかんないですよね。
なので、Sass導入のきっかけになったTwitterでの会話を急遽トゥギャってみました。
Togetter – CSSをライブラリ化？どうやらSassって便利らしい。
Rubyって聞くだけで「あ、自分には関係ないや」ってわたしなんか思っちゃう方なんですけど(←ダメ)、CSS3もこれから覚えてかなきゃだし、一緒に覚えたらコレ後々便利なんじゃないか？と、ただその予感だけでチャレンジしてみました。
とにかくやってみてから考えよう。ダメならやめればいいや。
本来なら、せっかくこんなエントリを投稿するんだし、利点を整理したり他と比較したりして「ホラホラ、こーんな風に便利なんですよ！」とか書くべきなんだろうけど、なんか長くなりそうだし、導入まででとりあえず頭が飽和したので、ここで一旦まとめさせてください。
実際の運用に関しては、追い追い書いてみようと思ってるので、とりあえず今回のエントリは、Sassのスタート部分だけです(自分用の備忘録兼ねてるんで長いです) 。あしからず。
さて、じゃあそもそもSassって何なんだって話なんですが、
Sass で CSS をすっきり記述する – ursmの日記 によると
Sass とは
http://sass-lang.com/ Sass は CSS を生成するためのメタ言語です。CSS はいかんせん記述力が低いため、あっという間にメンテナンス不能な状態に陥りがちですが、Sass を使うと上手い具合に構造化して記述することができます。
だそうです。
わたしも意味はよくわかってないですが、ざっくり言うと、
Sassという言語で左のように書くと、右のようなCSSを吐きだしてくれるらしいんです。(他にもいろいろあるけど)
Sass から CSS への変換例 Nesting
Sass から CSS への変換例 Selector Inheritance
以上公式サイト(http://sass-lang.com/)より抜粋
個人的には2コ目の@extend っていうのがかなり便利そうに感じるんですけど、いかがでしょうか。
とりあえず利点欠点は使ってみてから考えるとして、早速インストールしてみます。
ちなみにわたしの使用OSはWindows7です。
1.Ruby・RubyGemsのインストール
クリックでサイトへ飛びます
ここからダウンロードします。（http://www.ruby-lang.org/ja/）
詳しいインストールガイドはこちら
http://pub.cozmixng.org/~the-rwiki/rw-cgi.rb?cmd=view;name=Ruby+Install+Guide
わたしのような初心者には、さらに易しいインストールガイド をどうぞ。
るびま～Ruby ビギナーのための CGI 入門 【第 1 回】の「2ページ目-Rubyの準備」
インストール時のコンポーネント選択肢が現在はちょっと違いますが、RubyGemsにちゃんとチェックが入っていれば大丈夫です。デフォルトで「SciTE」にチェックが入っていたのでわたしはそのままインストールしましたが 、ただのテキストエディタ(色がついたりしてちょっと便利な感じではあるけど)っぽいので、不要な方はチェックを外しても…たぶん、大丈夫な気がします…。
2.Hamlのインストール
また新しい単語でてきましたけども。
このHamlっていうのは、上で書いたSassからCSSへの変換みたいなもののHTML版のようです。
つまり、HTMLもCSSも、それぞれHaml,Sassで記述して吐きださせることができるってことですね。
で、このHamlっていうのがRubyライブラリとして提供されてるわけなんですけど、SassはそのHamlの一部として含まれているのだそうです。
つまり、早い話がHTMLとCSSがセットになってるってだけなので、HamlをインストールすればSassも使えるようになると。
あ、でも両方使わないといけないようなものではなくって、Hamlだけでも、Sassだけでも使えます。
今回はSassについての話なので説明が逆になりました。(たぶんわたしはHamlはまだ使わないと思います)
で。公式サイトによると、このHamlをインストールするにはコマンドプロンプトから
gem install haml
って打てばインストールされる…
はずなんですけど。
なぜかわたしはインストールされず、いろいろ試行錯誤する羽目になりました。
エラーメッセージをとっておくのを忘れちゃったんですけど、たしかGemsが見つからないとかそんなんだったと思います。
そこで Rubyforge からRubyGemsの最新版を単体でDLしてインストールし直したところ、無事に上記コマンドでHamlもインストールできました。（上でチェックは入れといたんですけどねぇ…。なんだったんだろう）
3.テキストエディタでSassを書いてみる
わたしはせっかくインストールしたのでSciTEを使ってみましたが、基本的には拡張子.scss で保存できさえすればどんなテキストエディタでも大丈夫だと思います。
コピペしたい方へ：画像のリンク先にテキスト置いときました
上のNestingのコードをそのまま書いてみました。そして、それをtest01.scssという名前で保存。
(拡張子は.sass ではなく .scss なので注意！)
4.sass コマンドでCSSファイルを生成してみる
コマンドプロンプトで作業してるディレクトリに移動
cd C:\Users\(ユーザー名)\Documents\website\css
それから
sass test01.sass test01.css
ってやると、test01.scss から test01.css が生成されます。
生成されたCSSがこちら。
違うエディタで撮っちゃった(^_^;) ごめんなさーい。
ちょっと見比べづらいけど、一番上で紹介した公式サイトの例と同じスタイルが無事に書き出されました。
5.うん？なんかめんどくさくない？
いちいちコマンドプロンプトから打って変換しなければいけないのは、めんどくさいですよね。
上のtogetterのやりとりの中にもありましたが 、
sass 3 からは –watch オプションが出来たのでこれをつけて起動しておけばエディタで保存するだけで勝手に変換してくれますよ。
http://twitter.com/#!/kotarok/status/26042724800
とのこと。なので、上の変換時に使ったsassコマンドの代わりに
sass --watch test01.scss:test01.css
としてやります。
すると以後は、test01.scss を watch しといてくれて、書き変わったら CSS のほうも書き換えてくれるわけですね。
これなら1ファイルにつき1回だけ指定してあげればOK。いやーよかったよかった。
でも…
ファイル名を変更したり、複数のCSSファイルを使ってたり、後から追加したり。そのたびにコマンド打つのも結構めんどくさい。。
そこでもっとざっくり、フォルダ単位で「watchしといてね」と指定することができるんだそうです。
<たとえばfooっていうサイト内にあるsassフォルダを監視してcssフォルダにファイル生成させる場合>
sass --watch foo/sass:foo/css
こんな感じ。このとき sassフォルダにすでに.scssのファイルがあればcssフォルダ内に.cssのファイルが生成されますし、cssフォルダがなければフォルダも自動的に作成されます。
6.Sass導入、とりあえず完了！
というわけで、Rubyのインストールに始まり、Sassを実際に使ってみるとこまではなんとか完了しました。
既存のCSSもうまく使えばSassで再利用したり生かしたりできるらしいのですが、まだちょっと方法がよくわかっていないのでタスクリスト行き。(>_<)
Sass3に関する日本語ドキュメンテーションが見つけられなかったので、公式サイト(http://sass-lang.com/)などの英語のページをうにゃうにゃ言いながら読んで進めてます。。。
なのでもし、何か間違ってるよとか、補足などがあればぜひお知らせくださると嬉しいです。
どーぞよろしくお願いします。
あと別件なんですけど、今までDreamweaverのコードヒントを入力スピード補助ツールとして多用してきたので、普通のテキストエディタでの入力っていうのが予想外のハードルなんだけど、誰かいいエディタ知りませんか・゜・(PД`q｡)・゜・