驚愕！compass...
TRANSCRIPT
【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第７回
Ticklecode
Yoshinori Kobayashi 1
驚愕！compass が便利すぎる！
使ってみて便利すぎたcompasのtips集
2
生まれは 奈良県 です
小林由憲（こばやしよしのり）
Twitter:
TickleCode ブログ:
@yoshiii514
もくもく会（自主勉強会） を複数の運営メンバーや アドバイザーの方々と ともに、定期開催しています。
勉強会を開催しています)^o^(
3
【CoEdo.rb】
Ruby / Ruby on Rails ビギナーズ勉強会
Swiftビギナーズ勉強会
WordPressもくもく 勉強会
http://wp-moku.doorkeeper.jp/
https://swift-beginners.doorkeeper.jp/
https://coedo-rails.doorkeeper.jp/
自己紹介
4
驚愕！compass を Railsに導入
5
http://sass-lang.com/
Sass（サス）
驚愕！compass を Railsに導入
変数、ループなどが使えるcss出力するための拡張言語。 compassはSassのライブラリの１つ。
6
http://compass-style.org/
compass（コンパス） Sassでできたライブラリ群 よく使うものをあらかじめ便利に 使えるように用意してくれている。
驚愕！compass を Railsに導入
7
https://github.com/Compass/compass-rails
compass-rails
驚愕！compass を Railsに導入
8
驚愕！compass が便利すぎる Tips集
9
[css]
#box-shadow{
-moz-box-shadow: red 2px 2px 10px;
-webkit-box-shadow: red 2px 2px 10px;
box-shadow: red 2px 2px 10px;
}
ベンダープレフィックスを自動生成してくれる。
[scss]
#box-shadow{
@include box-shadow(red 2px 2px 10px);
}
驚愕！compass が便利すぎる Tips集
10
[css]
opacity50{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
IEの個別対応も自動で出力。
[scss]
opacity50{
@include opacity(0.5);
}
驚愕！compass が便利すぎる Tips集
11
[css]
.clearfix{
overflow: hidden;
*zoom: 1;
}
clearfixのmix-inもある。
[scss]
.clearfix{
@include clearfix;
}
驚愕！compass が便利すぎる Tips集
12
[css]
#width-duration-easein {
-moz-transition-property: width;
-o-transition-property: width;
-webkit-transition-property: width;
transition-property: width;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
CSS3の複雑な記述もシンプルに書ける。
[scss]
#width-duration-easein {
@include transition-property(width);
@include transition-duration(2s);
@include transition-timing-function(ease-in);
}
驚愕！compass が便利すぎる Tips集
13
.example address, .example article, ・・・（block要素）{
border: 1px solid #777777;
margin: 1em 3em;
}
.example a, .example span , ・・・（inline要素）{
color: #cc0000;
}
block要素、inline要素を指定できる。
example {
#{elements-of-type(block)} {
border: 1px solid #777777;
margin: 1em 3em;
}
#{elements-of-type(inline)} {
color: #cc0000;
}
}
驚愕！compass が便利すぎる Tips集
14
[css]
.box {
background: url('../img/icon-s04ddddb84.png') 0 -100px no-repeat;
height: 50px;
width: 70px;
}
red.png green.png blue.png icon-s04ddddb84.png
スプライト画像とCSSの生成！
[scss]
$icon: sprite-map("icon/*.png", $spacing:30px, $position: 0%, $layout: horizontal);
.box{
background:sprite($icon, red);
@include sprite-dimensions($icon, red);
}
驚愕！compass が便利すぎる Tips集
15
驚愕！まとめ：compassを使うとどうなるのか！
16
Chrome、Firefox、IEとか
どうでもよくなる！
compassが各ブラウザのcssを自動生成してくれるので、ブラウザ
のテストとかしなくてもだいたい綺麗に表示される。
最近は、あまりテストもしないし、ブラウザの種別も意識しなくて
よくなった。
驚愕！まとめ：compassを使うとどうなるのか！
17
CSS3などの記述が短く書けるし、自動生成されるの
で、記述ミスがなくテストしなくてもそこそこ動く。
コーディングが
とんでもなく早くなる！
驚愕！まとめ：compassを使うとどうなるのか！
18
Compassで楽々スプライト｜sass｜study｜kanapple.net
Web制作者のためのSassの教科書 - 公式サポートサイト
Compass Home | Compass Documentation
驚愕！参考資料やサイトのまとめ
19
今後の問い合わせ先
何かございましたら、
ご連絡ください(・∀・)
Twitter: @yoshiii514
Facebook: Yoshinori.Koba
Mail: [email protected]
最後に
20
ご清聴ありがとうございました。