驚愕！compass が便利すぎる！（使ってみて便利すぎたcompasのtips集）｜【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会第７回

【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会第７回
Ticklecode
Yoshinori Kobayashi1
驚愕！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（サス）
変数、ループなどが使えるcss出力するため
の拡張言語。
compassはSassのライブラリの１つ。

6
http://compass-style.org/
compass（コンパス） Sassでできたライブラリ群
よく使うものをあらかじめ便利に
使えるように用意してくれている。

7
https://github.com/Compass/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);
}

10
[css]
opacity50{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
IEの個別対応も自動で出力。
[scss]
opacity50{
@include opacity(0.5);
}

11
[css]
.clearfix{
overflow: hidden;
*zoom: 1;
}
clearfixのmix-inもある。
[scss]
.clearfix{
@include clearfix;
}

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

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

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

15
驚愕！まとめ：compassを使うとどうなるのか！

16
Chrome、Firefox、IEとか
どうでもよくなる！
compassが各ブラウザのcssを自動生成してくれるので、ブラウザ
のテストとかしなくてもだいたい綺麗に表示される。
最近は、あまりテストもしないし、ブラウザの種別も意識しなくて
よくなった。

17
CSS3などの記述が短く書けるし、自動生成されるの
で、記述ミスがなくテストしなくてもそこそこ動く。
コーディングが
とんでもなく早くなる！

18
Compassで楽々スプライト｜sass｜study｜kanapple.net
Web制作者のためのSassの教科書 - 公式サポートサイト
Compass Home | Compass Documentation
驚愕！参考資料やサイトのまとめ

19
今後の問い合わせ先
何かございましたら、
ご連絡ください(・∀・)
Twitter: @yoshiii514
Facebook: Yoshinori.Koba
Mail: info@ticklecode.com
最後に

20
ご清聴ありがとうございました。

驚愕！compass が便利すぎる！（使ってみて便利すぎたcompasのtips集）｜【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会第７回

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Mehr von Yoshinori Kobayashi

Mehr von Yoshinori Kobayashi (20)