エクストリーム Sass 開発
-
Upload
suga-masao -
Category
Technology
-
view
1.669 -
download
2
description
Transcript of エクストリーム Sass 開発
![Page 1: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/1.jpg)
エクストリームSass 開発@RejectKaigi2009
1
![Page 2: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/2.jpg)
自己紹介•名前:すがまさお•Mail:[email protected]• Twitter:@sugamasao•ブログ:まさにっき(はてなid:seiunsky)
•その他:OSS の Jiemamy にちょっとだけ参加
6月に転職して、 Flasher になりました!
2
![Page 3: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/3.jpg)
目印は
発表者のTシャツを見て><
3
![Page 4: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/4.jpg)
さて、みなさん
Haml/Sassしってますか?
4
![Page 5: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/5.jpg)
もちろんiPhoneの話に流れず、
ちゃんと浦嶌さんのセッションで聞いてますよね^^(森さんすみません><)
5
![Page 6: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/6.jpg)
一応せつめい•Haml• HTML をメタ言語で既述できる
•Sass• CSS をメタ言語で既述できる
6
![Page 7: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/7.jpg)
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
![Page 8: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/8.jpg)
Sassはh1 height: 118px margin-top: 1em
.tagline font-size: 26px text-align: right
•こんな風に書きます
8
![Page 9: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/9.jpg)
Sassは(その2)•変数が使えるよ•変数に対して演算ができるよ•#FFFFFF - #CCCCCC みたいなこと•Mixin っていうメソッドみたいのも使えるよ•sass コマンドで CSS ファイルを出力できるよ(hamlコマンドもあるよ!)
9
![Page 10: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/10.jpg)
Sassについて知る•詳しくは Web で!(ググレカス!)•http://d.hatena.ne.jp/seiunsky/20090708/1247075132
10
![Page 11: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/11.jpg)
ちなみに(宣伝)•先日リリースした 「となりの ATND さん」•http://sugamasao.dip.jp/atnd/
Haml + Sassで開発しました
11
![Page 12: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/12.jpg)
sass コマンドを使う
%sass SassScript ファイル 出力先
簡単ですね!
12
![Page 13: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/13.jpg)
Sass 単体なら・・・• CSS ってだいたい静的ファイルですよね• 既存システムで使ってる CSS を SassScript に置き換えるだけならスグできる
• あまり凝った使い方しなければデザイナーさんでも使えるかも!(変数あたりくらいなら)
13
![Page 14: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/14.jpg)
こんな感じのフロー
1.Sass Script を書く
2.CSS に変換する
3.ブラウザリロードして確認
14
![Page 15: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/15.jpg)
面倒くさっ><
1.Sass Script を書く
2.CSS に変換する
3.ブラウザリロードして確認面倒><
15
![Page 16: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/16.jpg)
面倒くさっ><
1.Sass Script を書く
2.CSS に変換する
3.ブラウザリロードして確認2. を忘れてリロードしまくるの
が目に浮かびますね
16
![Page 17: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/17.jpg)
そこで!
17
![Page 18: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/18.jpg)
Saag ですよ、奥さん
1.Sass Script を書く
2.CSS に変換する
3.ブラウザリロードして確認
ここを上手い事やってくれる
18
![Page 19: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/19.jpg)
Saag のインストール1.gem sources -a http://gems.github.com
2.sudo gem install sugamasao-saag
19
![Page 20: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/20.jpg)
Saag の使い方%saag -i SassScript パス -o 出力先
これだけで SassScript の監視を始めて、変更があれば CSS に変換します。
20
![Page 21: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/21.jpg)
Saag の使い方(2)• -i オプションは SassScript 単体でも、ディレクトリの指定でも良いよ
• ディレクトリの場合、配下のサブディレクトリも見に行くよ
21
![Page 22: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/22.jpg)
Saag の使い方(3)詳しくは GitHub のページで!http://wiki.github.com/sugamasao/saag
22
![Page 23: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/23.jpg)
デモ時間がありそうならデモするよ><こんな感じのディレクトリ構成を例にするよ.├── htdocs│ └── css└── src └── sass └── style.sass
23
![Page 24: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/24.jpg)
Saag の使い方
ね、簡単でしょう?
24
![Page 25: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/25.jpg)
さいごに
日本 Haml の会に入りたい!
25
![Page 26: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/26.jpg)
まとめ• Haml/Sass 便利です• コマンドがあるので、Sass でしれ~ッと CSS をジェネレートさせたりできる
• そんなときは Saag を使おう!><• 日本 Haml の会に入りたいです><• あと 日本 Sinatra の会にも入りたいです><
26
![Page 27: エクストリーム Sass 開発](https://reader033.fdocuments.net/reader033/viewer/2022052307/5554b006b4c905fd608b550d/html5/thumbnails/27.jpg)
ご清聴ありがとうございました
@RejectKaigi2009
27