本書是《響應(yīng)式Web設(shè)計：HTML5和CSS3實戰(zhàn)》作者Ben Frain的又一力作。作者通過豐富、完整的案例，循序漸進地展示了Sass和Compass的使用方法。既使不懂編程的設(shè)計師讀完本書也能輕松生成跨瀏覽器的、易于維護的CSS代碼，并學(xué)會編寫media query代碼，進行響應(yīng)式設(shè)計。本書適合交互設(shè)計師、UI設(shè)計師、網(wǎng)頁設(shè)計師、前端開發(fā)工程師閱讀。
作者簡介
Ben Frain是具有十多年經(jīng)驗的網(wǎng)頁設(shè)計師和前端工程師，直接與世界各地的客戶和設(shè)計機構(gòu)并肩工作。同時他還是一名技術(shù)記者，定期為一些關(guān)注Mac平臺、前沿科技、網(wǎng)頁設(shè)計和航空技術(shù)的刊物撰稿。
在此之前，他曾是一名懷才不遇的（而且謙虛謹慎的）電視演員，畢業(yè)于索爾福德大學(xué)的媒體與表演專業(yè)。他寫了四部（自認為）被低估的劇本，而且始終心懷能賣出一部的信念（盡管不像最初那么強烈了）。
工作之余，在身體（和妻子）允許的情況下，他喜歡玩室內(nèi)足球。 他的個人網(wǎng)站是www.benfrain.com，他的Twitter是twitter.com/benfrain。
目錄：
第1章 Sass和Compass概述 7
11 為什么需要CSS預(yù)處理器 8
111 如果最終生成的是CSS代碼，為什么不干脆手寫CSS？ 9
12 為什么應(yīng)該用Sass和Compass 9
121 使用變量（每個屬性值只需要定義一次） 10
理解變量語法 10
122 自動轉(zhuǎn)換的RGBA顏色值 11
123 忘記瀏覽器前綴 12
124 嵌套規(guī)則 12
125 Media queries變得更加簡單 13
126 自動壓縮CSS從而實現(xiàn)快速建站 15
13 什么是Sass 15
14 什么是Compass 17
15 安裝Sass和Compass 17
151 OS X系統(tǒng)安裝方法 18
16 通過命令行安裝和使用Sass和Compass 19
161 在Windows下安裝Ruby 19
162 運行g(shù)em命令 19
163 Mac OS X命令安裝 20
164 Windows命令行安裝 21
165 檢查你的Sass和Compass版本 22
166 檢查有哪些Sass和Compass版本可用 23
167 安裝最新版本的Sass和Compass（包括預(yù)發(fā)布版本） 23
168 從命令行創(chuàng)建Sass和Compass工程 24
169 命令行自動編譯功能 26
17 使用圖形界面軟件運行Sass 和 Compass 26
171 Scout app 27
172 CodeKit 27
173 LiveReload 28
18 在文本編輯器下使用Sass文件 30
19 小結(jié) 31
第2章 創(chuàng)建Sass和Compass工程 33
21 創(chuàng)建Sass和Compass工程 34
211 創(chuàng)建Compass工程 35
創(chuàng)建定制化的Compass工程36
創(chuàng)建空的Compass工程37
22 理解con?grb文件 38
221 添加需要的插件 40
222 為工程資源設(shè)定名稱和路徑 40
223 設(shè)定CSS輸出樣式 41
嵌套輸出選項 41
緊密輸出方式 42
壓縮輸出方式 43
去掉注釋，保持樣式 43
壓縮CSS，保持注釋（凸顯注釋） 44
打開相對資源路徑功能 44
23 創(chuàng)建和使用模塊文件 45
231 Sass提供可維護的生產(chǎn)性代碼 46
232 導(dǎo)入模塊文件 48
233 Sass中書寫變量的語法 49
24 Sass注釋格式 50
241 標準CSS注釋 50
242 Sass單行注釋 50
25 基礎(chǔ)的indexhtml文件51
26 未來工程的基礎(chǔ)構(gòu)架 52
27 總結(jié) 53
第3章 嵌套，擴展，占位符和混合宏 55
31 用Sass和Compass給網(wǎng)站添加樣式 55
目錄 9
32 從視覺上分割布局 57
33 什么是嵌套？它是如何實現(xiàn)代碼模塊化的？ 60
331 嵌套語法 60
父級選擇器 64
級聯(lián)選擇器 65
332 使用父級選擇器輕松添加Modernizr樣式 66
給字體定義一個模塊文件 67
用Modernizr和父級選擇器改變字體 68
過度嵌套的危險 69
ID選擇器不好？ 71
333 嵌套命名空間 72
34 使用@extend命令擴展現(xiàn)有代碼 75
35 使用占位符選擇器來擴展需要的樣式 77
36 什么是混合宏？如何使用混合宏來輕松生成常用代碼？ 78
361 混合宏的基本語法 80
362 如何用默認值寫混合宏 82
37 生成CSS的注意事項 85
38 總結(jié) 86
第4章 輕松玩轉(zhuǎn)顏色 87
41 只定義一次顏色 88
42 變淺和加深函數(shù) 89
421 掌握HSL顏色標準 90
422 變淺和加深函數(shù)語法 91
43 標簽修改和轉(zhuǎn)換 92
431 Compass的clear?x功能 93
44 再談顏色 95
441 混合宏里還有混合宏？這是什么新功能？ 97
45 互補（和反色）函數(shù) 101
46 反色函數(shù) 102
47 色調(diào)調(diào)節(jié)函數(shù) 102
48 飽和函數(shù)和去飽和函數(shù) 103
49 透明化函數(shù)和漸隱函數(shù) 105
410 不透明化函數(shù)和漸現(xiàn)函數(shù) 106
411 灰度函數(shù) 106
412 rgba函數(shù) 107
413 混合函數(shù) 108
414 調(diào)色函數(shù) 109
415 比例調(diào)色函數(shù) 110
416 遮陰函數(shù)和增亮函數(shù) 112
417 綜合利用函數(shù) 113
418 總結(jié) 114
第5章 Sass和Compass的響應(yīng)式彈性網(wǎng)格系統(tǒng) 115
51 反對使用網(wǎng)格系統(tǒng)的各種說法 116
52 為什么使用網(wǎng)格系統(tǒng) 117
53 什么是Susy? 117
531 Susy到底是做什么的？ 118
54 安裝Susy Compass插件 119
55 在工程中引入Susy 120
551 Susy工程變量 120
56 創(chuàng)建Susy網(wǎng)格系統(tǒng) 121
57 為網(wǎng)格系統(tǒng)定義背景 122
571 顯示網(wǎng)格背景 123
572 給Susy設(shè)置border-box屬性 124
58 創(chuàng)建“移動”響應(yīng)式網(wǎng)格系統(tǒng) 125
59 用Susy創(chuàng)建斷點 125
510 創(chuàng)建流體網(wǎng)格系統(tǒng) 131
511 創(chuàng)建靜態(tài)的“固定化”網(wǎng)格系統(tǒng) 132
512 使用Susy網(wǎng)格幫助工具 132
5121 Pre?x、Suf?x和Pad 133
5122 Pre?x 133
5123 Suf?x 134
5124 Pad 135
513 Pre, Post, Squish, Push和Pull 136
5131 Pre 136
5132 Post 137
5133 Squish 137
5134 Push和Pull 137
514 網(wǎng)格內(nèi)嵌套網(wǎng)格 138
5141 nth-omega混合宏 139
515 子像素的四舍五入問題 142
目錄 11
5151 為什么會發(fā)生像素取整錯誤 143
5152 容器相對布局 143
5153 標準Susy語法及輸出 143
分格混合宏 144
516 總結(jié) 146
第6章 Sass和混合宏中的高級media queries 147
61 Sass中的Media queries 148
611 使用media query模塊文件分離media query樣式 149
62 Sass的行內(nèi)media queries 149
63 創(chuàng)建混合宏輕松處理media queries 151
631 將斷點定義為變量 151
64 MQ media query混合宏是如何工作的 153
65 各種情況的應(yīng)用 154
66 書寫行內(nèi)media queries 155
67 gzip和CSS壓縮=勝利！ 160
68 實際工程中行內(nèi)media queries和集合media queries的區(qū)別 161
69 復(fù)習(xí)CSS代碼 163
610 總結(jié) 165
第7章 Compass中的CSS3、Image Sprites等功能 167
71 用Compass混合宏輕松實現(xiàn)CSS3 168
711 文本陰影屬性的語法 168
使用默認值的文本陰影 169
72 border-radius語法 170
73 復(fù)列 171
731 分列規(guī)則語法 172
732 盒子陰影混合宏 173
733 盒子陰影語法 173
734 多重盒子陰影 174
74 背景漸變 176
741 背景線性漸變語法 176
742 背景輻射漸變語法 178
743 組合漸變和背景圖像 178
75 用Compass image-url幫助工具添加背景圖像179
76 圖像寬度和高度幫助工具 180
761 Compass緩存消除功能 181
77 Compass的image sprites功能 182
771 其他sprite配置選項 185
為每個HTML選擇器添加高度和寬度 185
給圖像周圍添加額外的內(nèi)邊距 185
772 布局選項 186
78 Compass文本替代混合宏 186
781 文本隱藏混合宏 186
782 Squish-text混合宏 187
783 用圖像代替文本 188
79 為圖像創(chuàng)建數(shù)據(jù)URI 189
791 行內(nèi)圖像語法 191
710 不支持SVG格式設(shè)備的備選方法 192
711 CSS變形功能 193
712 CSS過濾器 196
713 過渡 197
714 總結(jié) 198
第8章 Sass的編程邏輯 199
81 Sass的數(shù)學(xué)計算 200
811 加法 200
812 減法 200
713 乘法 201
814 除法 201
815 使用變量進行計算 203
82 控制命令及使用方法 203
821 @if和@else if控制命令 204
822 @for循環(huán) 205
823 計數(shù)器變量 207
824 from to和from through 207
插入功能 208
825 @each循環(huán) 209
83 給數(shù)值去除和添加單位 213
831 從數(shù)值上去除單位 213
832 給變量值添加單位 213
84 在Sass中寫函數(shù) 214
841 相等操作符 215
842 關(guān)系操作符 215
843 @return 216
844 使用函數(shù)的返回結(jié)果 216
85 使用@debug命令 216
86 @warn命令 219
87 總結(jié) 219
第9章 精通Sass和Compass 221
91 關(guān)閉指定瀏覽器的Compass支持功能 222
911 配置支持變量 223
912 基于WebKit內(nèi)核的Opera 225
92 為最新發(fā)布的CSS屬性提供支持 225
93 定義最新屬性值 227
94 Sass交互式shell 228
941 Compass交互 229
95 添加Sass globbing插件來批量導(dǎo)入模塊文件 229
96 創(chuàng)建多個獨立的樣式表 230
97 將模塊文件轉(zhuǎn)換為獨立的樣式表 231
98 Compass統(tǒng)計 231
99 清空Sass緩存 233
910 一次性Compass編譯 234
911 小結(jié) 234
9111 修正人為錯誤 234
9112 使用Lint工具發(fā)現(xiàn)常見問題 236
912 用工具和測試避免推斷 237
9121 Chrome開發(fā)者工具 237
持續(xù)頁面刷新 238
9122 查找沒被使用的樣式 240
913 循序漸進 242
914 總結(jié) 243
|
