驚愕!compass...
TRANSCRIPT
【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第7回
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のライブラリの1つ。
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
ご清聴ありがとうございました。