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

逸見 誠(@mako_wis)

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

• Twitter:@mako_wis

• 株式会社クレオフーガ

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

• Jave、C#、Objective-C、Ruby

• 好きなGem:sass-rails

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

ひたすらhamlとSassの日々

案外、楽しい

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

今日はSassの発表します

Sass使ってますか？

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

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

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

SASS？SCSS？

SASS記法とSCSS記法• SassにはSASS記法（拡張子を.sass）と

SCSS記法（拡張子を.scss）の違いがある

• 元々の記法→SASS記法

• コーディングが簡略化

• CSSに近い記法→SCSS記法

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

SASS記法

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

SCSS記法

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

個人的にはSCSS記法推し

最悪、CSS記法でかける！

というわけで本題

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

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

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

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

そんな時はネスト

ネストしたスタイル// 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;}

まだ悩みありませんか？

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

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

そんな時は変数

変数// 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;}

まだありますよね？

幅の計算がめんどくさい

40px

940px

300px ? px

hoge fuga

そんな時は計算しよう

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

まだまだありますよね？

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

!// 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;}

そんな時にmixin

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;}

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

とりあえずは

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

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

Sassでちょっと楽しよう

おわり