Sassでちょっと楽しよう

39
Sassでちょっと楽しよう 16回 岡山Ruby, Ruby on Rails勉強会 逸見 (@mako_wis)

description

16Ruby, Ruby on Rails

Transcript of Sassでちょっと楽しよう

Page 1: Sassでちょっと楽しよう

Sassでちょっと楽しよう第16回 岡山Ruby, Ruby on Rails勉強会

逸見 誠(@mako_wis)

Page 2: Sassでちょっと楽しよう

自己紹介• 逸見 誠(へんみ まこと)

• Twitter:@mako_wis

• 株式会社クレオフーガ

• iPhoneアプリ開発担当マークアッパー(初心者)

• Jave、C#、Objective-C、Ruby

• 好きなGem:sass-rails

Page 3: Sassでちょっと楽しよう

最近のお仕事はマークアップ

Page 4: Sassでちょっと楽しよう

ひたすらhamlとSassの日々

Page 5: Sassでちょっと楽しよう

案外、楽しい

Page 6: Sassでちょっと楽しよう

なので今回のスライドには Ruby出てきません

Page 7: Sassでちょっと楽しよう

今日はSassの発表します

Page 8: Sassでちょっと楽しよう

Sass使ってますか?

Page 9: Sassでちょっと楽しよう

Sassとは?• CSS Preprocessorの中のひとつ

• CSSの弱い部分を補うためCSSをベースに機能を拡張したもの

• コンパイルをすることでCSSファイルに変換される

Page 10: Sassでちょっと楽しよう

SASS?SCSS?

Page 11: Sassでちょっと楽しよう

SASS記法とSCSS記法• SassにはSASS記法(拡張子を.sass)と

SCSS記法(拡張子を.scss)の違いがある

• 元々の記法→SASS記法

• コーディングが簡略化

• CSSに近い記法→SCSS記法

• CSSの書き方そのままでも書ける

Page 12: Sassでちょっと楽しよう

SASS記法

h2 color: black .sub_title font-size: smaller color: #808080 a font-size: smaller

Page 13: Sassでちょっと楽しよう

SCSS記法

h2 { color: black; .sub_title { font-size: smaller; color: #808080; }! a { font-size: smaller; }}

Page 14: Sassでちょっと楽しよう

個人的にはSCSS記法推し

Page 15: Sassでちょっと楽しよう

最悪、CSS記法でかける!

Page 16: Sassでちょっと楽しよう

というわけで本題

Page 17: Sassでちょっと楽しよう

Sassでちょっと楽しましょう

Page 18: Sassでちょっと楽しよう

こんな悩みありませんか?

Page 19: Sassでちょっと楽しよう

同じクラス名等を何回も 書かないといけない

// CSSp.title { color:#000;}!p.title span.sub_title { font-size: smaller; color: #808080;}!p.title .hoge { ・・・}

Page 20: Sassでちょっと楽しよう

そんな時はネスト

Page 21: Sassでちょっと楽しよう

ネストしたスタイル// SCSSp.title { color:#000; span.sub_title { font-size: smaller; color: #808080; }}!// CSSp.title { color:#000;}!p.title span.sub_title { font-size: smaller; color: #808080;}

Page 22: Sassでちょっと楽しよう

まだ悩みありませんか?

Page 23: Sassでちょっと楽しよう

同じカラーコードを 何回も書かないといけない

!// CSSh1 { font-size: 16px; color: #9B111E; border-bottom: solid 1px #9B111E;}h2 { border-bottom: solid 1px #9B111E;}h3 { border-bottom: solid 1px #9B111E;}

Page 24: Sassでちょっと楽しよう

そんな時は変数

Page 25: Sassでちょっと楽しよう

変数// SCSS$foo-font-size : 16px;$foo-line : 1px;$foo-color : #9B111E;$foo-border : solid $foo-line $foo-color;!h1 { font-size: $foo-font-size; color: $foo-color; border-bottom: $foo-border;}!h2 { border-bottom: $foo-border;}!// CSSh1 { font-size: 16px; color: #9B111E; border-bottom: solid 1px #9B111E;}h2 { border-bottom: solid 1px #9B111E;}

Page 26: Sassでちょっと楽しよう

まだありますよね?

Page 27: Sassでちょっと楽しよう

幅の計算がめんどくさい

40px

940px

300px ? px

hoge fuga

Page 28: Sassでちょっと楽しよう

そんな時は計算しよう

Page 29: Sassでちょっと楽しよう

幅の計算// SCSS$hogefuga-width: 940px;$hoge-width: 300px;$foge-fuga-margin:40px;!.fuga { width: $hogefuga-width - $hoge-width - $foge-fuga-margin;}!// CSS.fuga { width: 600px;}!// ※細かいスタイルは省略してます。

Page 30: Sassでちょっと楽しよう

まだまだありますよね?

Page 31: Sassでちょっと楽しよう

同じ構成のスタイルを 何回も書かないといけない

!// CSSdiv.hoge { -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}div.huga { -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; -ms-border-radius: 0.5em; border-radius: 0.5em;}

Page 32: Sassでちょっと楽しよう

そんな時にmixin

Page 33: Sassでちょっと楽しよう

mixin// SCSS@mixin border-radius($size:0.5em) { // デフォルト値を設定可 -moz-border-radius: $size; -webkit-border-radius: $size; -ms-border-radius: $size; border-radius: $size;}!div.hoge { @include border-radius(5px);}div.huga { @include border-radius;}!// CSSdiv.hoge { -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}div.huga { -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; -ms-border-radius: 0.5em; border-radius: 0.5em;}

Page 34: Sassでちょっと楽しよう

他にもできることはあるけど

Page 35: Sassでちょっと楽しよう

とりあえずは

Page 36: Sassでちょっと楽しよう

使えるところから使ってみる

Page 37: Sassでちょっと楽しよう

しんどくなったら意味ない

Page 38: Sassでちょっと楽しよう

Sassでちょっと楽しよう

Page 39: Sassでちょっと楽しよう

おわり