web design using compass
TRANSCRIPT
![Page 1: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/1.jpg)
Design Web Using
13年7月4⽇日星期四
![Page 2: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/2.jpg)
Design Web Using
Compass13年7月4⽇日星期四
![Page 3: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/3.jpg)
@kmsheng哭哭..快變兩個⼝口秋的體重啦..
https://www.facebook.com/kuanmin.sheng.1
13年7月4⽇日星期四
![Page 4: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/4.jpg)
Dude ! You got a problem !
13年7月4⽇日星期四
![Page 5: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/5.jpg)
13年7月4⽇日星期四
![Page 6: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/6.jpg)
14 Rules for Faster Loading Web Sites
by Steve Souders
13年7月4⽇日星期四
![Page 7: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/7.jpg)
Rule #1
13年7月4⽇日星期四
![Page 8: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/8.jpg)
Make Fewer HTTP Requests
13年7月4⽇日星期四
![Page 9: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/9.jpg)
13年7月4⽇日星期四
![Page 10: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/10.jpg)
⼿手刻的浪漫很好但是...
13年7月4⽇日星期四
![Page 11: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/11.jpg)
還有更好的做法
13年7月4⽇日星期四
![Page 12: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/12.jpg)
13年7月4⽇日星期四
![Page 13: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/13.jpg)
為什麼你應該使⽤用 compass ?
13年7月4⽇日星期四
![Page 14: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/14.jpg)
避免單⼀一檔案⾏行數過多好管理
13年7月4⽇日星期四
![Page 15: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/15.jpg)
更具模組化modular
13年7月4⽇日星期四
![Page 16: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/16.jpg)
重複使⽤用ie hacks & animation
13年7月4⽇日星期四
![Page 17: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/17.jpg)
合併CSS最好能在符合 IE max selectors 的情況下減少
stylesheets 數量
13年7月4⽇日星期四
![Page 18: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/18.jpg)
Vendor Prefixescompass 幫你加
13年7月4⽇日星期四
![Page 19: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/19.jpg)
Compass CSS3
@import “compass/css3”;
.simple { @include border-radius(8px, 4px);}
13年7月4⽇日星期四
![Page 20: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/20.jpg)
Compass CSS3 Result
.simple { -webkit-border-radius: 8px 4px; -moz-border-radius: 8px 4px; -khtml-border-radius: 8px 4px; border-radius: 8px 4px;}
13年7月4⽇日星期四
![Page 21: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/21.jpg)
Compass Creates Image Sprites
13年7月4⽇日星期四
![Page 22: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/22.jpg)
Compass Uses Sass
13年7月4⽇日星期四
![Page 23: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/23.jpg)
煞死能幹嘛?可以吃嗎?
13年7月4⽇日星期四
![Page 24: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/24.jpg)
巢狀撰寫Nesting
13年7月4⽇日星期四
![Page 25: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/25.jpg)
Nesting.toolbar { .btn {
display: inline-block; padding: 4px 12px; &:hover {
background-color: $blue; } }}
13年7月4⽇日星期四
![Page 26: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/26.jpg)
變數Variables
13年7月4⽇日星期四
![Page 27: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/27.jpg)
Variables
13年7月4⽇日星期四
![Page 28: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/28.jpg)
!defaultonly assign when it doesn’t have a value yet
13年7月4⽇日星期四
![Page 29: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/29.jpg)
函式Mixins
13年7月4⽇日星期四
![Page 30: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/30.jpg)
Mixins// Center-align a block
// level element
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
13年7月4⽇日星期四
![Page 31: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/31.jpg)
Mixins// tricking the GPU to think
// that an element is 3D
@mixin fade($duration) {
transition: $duration;
transform: translateZ(0);
opacity: 0.25;
}
13年7月4⽇日星期四
![Page 32: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/32.jpg)
⽤用別⼈人寫好的 mixins 才是⺩王道啊keyword: sass animation mixin
13年7月4⽇日星期四
![Page 33: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/33.jpg)
繼承Selector Inheritance
13年7月4⽇日星期四
![Page 34: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/34.jpg)
Selector inheritance.btn { padding: 4px 12px;}.btn-delete { @extend .btn; background-color: $red;}
13年7月4⽇日星期四
![Page 35: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/35.jpg)
運算⼦子Math
13年7月4⽇日星期四
![Page 36: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/36.jpg)
Math
$baseFontSize: 14px !default;
$fontSizeLarge: $baseFontSize * 1.25 !default;
13年7月4⽇日星期四
![Page 37: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/37.jpg)
13年7月4⽇日星期四
![Page 38: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/38.jpg)
Compass Reports Syntax Errors
13年7月4⽇日星期四
![Page 39: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/39.jpg)
13年7月4⽇日星期四
![Page 40: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/40.jpg)
new-navigation.scssnavbar.scss
jumbotron.scss
tab-list.scss
login.scss
events.scss
goods.scss
logo.scss
13年7月4⽇日星期四
![Page 41: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/41.jpg)
或許你要問..
13年7月4⽇日星期四
![Page 42: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/42.jpg)
阿~舊的css怎麼辦?
13年7月4⽇日星期四
![Page 43: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/43.jpg)
sass-convertsass-convert -R my_css_dir --from css --to scss
13年7月4⽇日星期四
![Page 44: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/44.jpg)
重構refactor
13年7月4⽇日星期四
![Page 45: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/45.jpg)
grunt-contrib-compass
13年7月4⽇日星期四
![Page 46: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/46.jpg)
css不⽤用再被git trace囉..deploy 前 grunt 幫你 build 出來
13年7月4⽇日星期四
![Page 47: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/47.jpg)
在win7怎麼裝compass?如果你真的要⽤用 windows Orz..
13年7月4⽇日星期四
![Page 48: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/48.jpg)
要換compass⼀一定要先裝ruby
13年7月4⽇日星期四
![Page 49: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/49.jpg)
在win7怎麼裝compass?如果你真的要⽤用 windows Orz..
here
13年7月4⽇日星期四
![Page 50: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/50.jpg)
exe 檔裝好之後打開 “Start Command Prompt with Ruby”
13年7月4⽇日星期四
![Page 51: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/51.jpg)
gem install sassgem install compass
13年7月4⽇日星期四
![Page 52: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/52.jpg)
在要 watch ⺫⽬目錄新增 config、css、sass、
img 資料夾
13年7月4⽇日星期四
![Page 53: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/53.jpg)
// config 資料夾裡新增 compass.rb 內容如下
http_path = “/”css_dir = “css”cass_dir = “sass”images_dir = “img”
13年7月4⽇日星期四
![Page 54: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/54.jpg)
裝好之後就可以下 compass watch 開始寫
sass 囉
13年7月4⽇日星期四
![Page 55: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/55.jpg)
ng-animate其實就是 CSS3 ..
http://www.nganimate.org
13年7月4⽇日星期四
![Page 56: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/56.jpg)
13年7月4⽇日星期四
![Page 57: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/57.jpg)
13年7月4⽇日星期四
![Page 58: Web design using compass](https://reader033.vdocument.in/reader033/viewer/2022052410/5550d69bb4c90599308b51f0/html5/thumbnails/58.jpg)
Q & A
13年7月4⽇日星期四