エクストリームSass 開発@RejectKaigi2009

1

自己紹介•名前：すがまさお•Mail：sugamasao@gmail.com• Twitter：@sugamasao•ブログ：まさにっき（はてなid:seiunsky）

•その他：OSS の Jiemamy にちょっとだけ参加

6月に転職して、 Flasher になりました！

2

目印は

発表者のTシャツを見て＞＜

3

さて、みなさん

Haml/Sassしってますか？

4

もちろんiPhoneの話に流れず、

ちゃんと浦嶌さんのセッションで聞いてますよね^^（森さんすみません＞＜）

5

一応せつめい•Haml• HTML をメタ言語で既述できる

•Sass• CSS をメタ言語で既述できる

6

Hamlは

!!! XML!!! 1.1%html{:xmlns => 'http://www.w3.org/1999/xhtml'} %head %title Hello, Haml! %body #header %h1 Hello, Haml! #content %p I use Haml %span.version= Haml::VERSION

•こんな風に書きます

7

Sassはh1 height: 118px margin-top: 1em

.tagline font-size: 26px text-align: right

•こんな風に書きます

8

Sassは（その２）•変数が使えるよ•変数に対して演算ができるよ•#FFFFFF - #CCCCCC みたいなこと•Mixin　っていうメソッドみたいのも使えるよ•sass コマンドで CSS ファイルを出力できるよ(hamlコマンドもあるよ！)

9

Sassについて知る•詳しくは Web で！（ググレカス！）•http://d.hatena.ne.jp/seiunsky/20090708/1247075132

10

ちなみに（宣伝）•先日リリースした 「となりの ATND さん」•http://sugamasao.dip.jp/atnd/

Haml + Sassで開発しました

11

sass コマンドを使う

%sass SassScript ファイル 出力先

簡単ですね！

12

Sass 単体なら・・・• CSS ってだいたい静的ファイルですよね• 既存システムで使ってる CSS を SassScript に置き換えるだけならスグできる

• あまり凝った使い方しなければデザイナーさんでも使えるかも！（変数あたりくらいなら）

13

こんな感じのフロー

1.Sass Script を書く

2.CSS に変換する

3.ブラウザリロードして確認

14

面倒くさっ＞＜

1.Sass Script を書く

2.CSS に変換する

3.ブラウザリロードして確認面倒＞＜

15

面倒くさっ＞＜

1.Sass Script を書く

2.CSS に変換する

3.ブラウザリロードして確認2. を忘れてリロードしまくるの

が目に浮かびますね

16

そこで！

17

Saag ですよ、奥さん

1.Sass Script を書く

2.CSS に変換する

3.ブラウザリロードして確認

ここを上手い事やってくれる

18

Saag のインストール1.gem sources -a http://gems.github.com

2.sudo gem install sugamasao-saag

19

Saag の使い方%saag -i SassScript パス -o 出力先

これだけで SassScript の監視を始めて、変更があれば CSS に変換します。

20

Saag の使い方（2）• -i オプションは SassScript 単体でも、ディレクトリの指定でも良いよ

• ディレクトリの場合、配下のサブディレクトリも見に行くよ

21

Saag の使い方（3）詳しくは GitHub のページで！http://wiki.github.com/sugamasao/saag

22

デモ時間がありそうならデモするよ＞＜こんな感じのディレクトリ構成を例にするよ.├── htdocs│ └── css└── src └── sass └── style.sass

23

Saag の使い方

ね、簡単でしょう？

24

さいごに

日本 Haml の会に入りたい！

25

まとめ• Haml/Sass 便利です• コマンドがあるので、Sass でしれ～ッと CSS をジェネレートさせたりできる

• そんなときは Saag を使おう！＞＜• 日本 Haml の会に入りたいです＞＜• あと 日本 Sinatra の会にも入りたいです＞＜

26

ご清聴ありがとうございました

@RejectKaigi2009

27