Web design using compass

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⽇日星期四