Sassでちょっと楽しよう
-
Upload
makoto-henmi -
Category
Software
-
view
522 -
download
1
description
Transcript of Sassでちょっと楽しよう
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でちょっと楽しよう
おわり