Embed Size (px)
Citation preview
Design Web Using
13年7月4⽇日星期四
Design Web Using
Compass13年7月4⽇日星期四
@kmsheng哭哭..快變兩個⼝口秋的體重啦..
https://www.facebook.com/kuanmin.sheng.1
13年7月4⽇日星期四
Dude ! You got a problem !
13年7月4⽇日星期四
13年7月4⽇日星期四
14 Rules for Faster Loading Web Sites
by Steve Souders
13年7月4⽇日星期四
Rule #1
13年7月4⽇日星期四
Make Fewer HTTP Requests
13年7月4⽇日星期四
13年7月4⽇日星期四
⼿手刻的浪漫很好但是...
13年7月4⽇日星期四
還有更好的做法
13年7月4⽇日星期四
13年7月4⽇日星期四
為什麼你應該使⽤用 compass ?
13年7月4⽇日星期四
避免單⼀一檔案⾏行數過多好管理
13年7月4⽇日星期四
更具模組化modular
13年7月4⽇日星期四
重複使⽤用ie hacks & animation
13年7月4⽇日星期四
合併CSS最好能在符合 IE max selectors 的情況下減少
stylesheets 數量
13年7月4⽇日星期四
Vendor Prefixescompass 幫你加
13年7月4⽇日星期四
Compass CSS3
@import “compass/css3”;
.simple { @include border-radius(8px, 4px);}
13年7月4⽇日星期四
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⽇日星期四
Compass Creates Image Sprites
13年7月4⽇日星期四
Compass Uses Sass
13年7月4⽇日星期四
煞死能幹嘛?可以吃嗎?
13年7月4⽇日星期四
巢狀撰寫Nesting
13年7月4⽇日星期四
Nesting.toolbar { .btn {
display: inline-block; padding: 4px 12px; &:hover {
background-color: $blue; } }}
13年7月4⽇日星期四
變數Variables
13年7月4⽇日星期四
Variables
13年7月4⽇日星期四
!defaultonly assign when it doesn’t have a value yet
13年7月4⽇日星期四
函式Mixins
13年7月4⽇日星期四
Mixins// Center-align a block
// level element
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
13年7月4⽇日星期四
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⽇日星期四
⽤用別⼈人寫好的 mixins 才是⺩王道啊keyword: sass animation mixin
13年7月4⽇日星期四
繼承Selector Inheritance
13年7月4⽇日星期四
Selector inheritance.btn { padding: 4px 12px;}.btn-delete { @extend .btn; background-color: $red;}
13年7月4⽇日星期四
運算⼦子Math
13年7月4⽇日星期四
Math
$baseFontSize: 14px !default;
$fontSizeLarge: $baseFontSize * 1.25 !default;
13年7月4⽇日星期四
13年7月4⽇日星期四
Compass Reports Syntax Errors
13年7月4⽇日星期四
13年7月4⽇日星期四
new-navigation.scssnavbar.scss
jumbotron.scss
tab-list.scss
login.scss
events.scss
goods.scss
logo.scss
13年7月4⽇日星期四
或許你要問..
13年7月4⽇日星期四
阿~舊的css怎麼辦?
13年7月4⽇日星期四
sass-convertsass-convert -R my_css_dir --from css --to scss
13年7月4⽇日星期四
重構refactor
13年7月4⽇日星期四
grunt-contrib-compass
13年7月4⽇日星期四
css不⽤用再被git trace囉..deploy 前 grunt 幫你 build 出來
13年7月4⽇日星期四
在win7怎麼裝compass?如果你真的要⽤用 windows Orz..
13年7月4⽇日星期四
要換compass⼀一定要先裝ruby
13年7月4⽇日星期四
在win7怎麼裝compass?如果你真的要⽤用 windows Orz..
here
13年7月4⽇日星期四
exe 檔裝好之後打開 “Start Command Prompt with Ruby”
13年7月4⽇日星期四
gem install sassgem install compass
13年7月4⽇日星期四
在要 watch ⺫⽬目錄新增 config、css、sass、
img 資料夾
13年7月4⽇日星期四
// config 資料夾裡新增 compass.rb 內容如下
http_path = “/”css_dir = “css”cass_dir = “sass”images_dir = “img”
13年7月4⽇日星期四
裝好之後就可以下 compass watch 開始寫
sass 囉
13年7月4⽇日星期四
ng-animate其實就是 CSS3 ..
http://www.nganimate.org
13年7月4⽇日星期四
13年7月4⽇日星期四
13年7月4⽇日星期四
Q & A
13年7月4⽇日星期四
