Web design using compass
Upcoming SlideShare
Loading in...5
×
 

Web design using compass

on

  • 262 views

 

Statistics

Views

Total Views
262
Views on SlideShare
262
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web design using compass Web design using compass Presentation Transcript

  • Design Web Using 13年7月4⽇日星期四
  • Design Web Using Compass 13年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 Prefixes compass 幫你加 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⽇日星期四
  • !default only 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.scss navbar.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-convert sass-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 sass gem 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⽇日星期四