Sass和Compass設(shè)計(jì)師指南

第1章  Sass和Compass概述  7
11  為什么需要CSS預(yù)處理器 8
111  如果最終生成的是CSS代碼，為什么不干脆手寫CSS？ 9
12  為什么應(yīng)該用Sass和Compass 9
121  使用變量（每個(gè)屬性值只需要定義一次） 10
理解變量語(yǔ)法 10
122  自動(dòng)轉(zhuǎn)換的RGBA顏色值 11
123  忘記瀏覽器前綴 12
124  嵌套規(guī)則 12
125 Media queries變得更加簡(jiǎn)單 13
126  自動(dòng)壓縮CSS從而實(shí)現(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  運(yùn)行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  命令行自動(dòng)編譯功能 26
17  使用圖形界面軟件運(yùn)行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
嵌套輸出選項(xiàng) 41
緊密輸出方式 42
壓縮輸出方式 43
去掉注釋，保持樣式 43
壓縮CSS，保持注釋（凸顯注釋） 44
打開相對(duì)資源路徑功能 44
23  創(chuàng)建和使用模塊文件 45
231 Sass提供可維護(hù)的生產(chǎn)性代碼 46
232  導(dǎo)入模塊文件 48
233 Sass中書寫變量的語(yǔ)法 49
24 Sass注釋格式 50
241  標(biāo)準(zhǔn)CSS注釋 50
242 Sass單行注釋 50
25  基礎(chǔ)的indexhtml文件51
26  未來(lái)工程的基礎(chǔ)構(gòu)架 52
27  總結(jié) 53
第3章  嵌套，擴(kuò)展，占位符和混合宏  55
31  用Sass和Compass給網(wǎng)站添加樣式 55
目錄      9
32  從視覺上分割布局 57
33  什么是嵌套？它是如何實(shí)現(xiàn)代碼模塊化的？ 60
331  嵌套語(yǔ)法 60
父級(jí)選擇器 64
級(jí)聯(lián)選擇器 65
332  使用父級(jí)選擇器輕松添加Modernizr樣式 66
給字體定義一個(gè)模塊文件 67
用Modernizr和父級(jí)選擇器改變字體 68
過度嵌套的危險(xiǎn) 69
ID選擇器不好？ 71
333  嵌套命名空間 72
34  使用@extend命令擴(kuò)展現(xiàn)有代碼 75
35  使用占位符選擇器來(lái)擴(kuò)展需要的樣式 77
36  什么是混合宏？如何使用混合宏來(lái)輕松生成常用代碼？ 78
361  混合宏的基本語(yǔ)法 80
362  如何用默認(rèn)值寫混合宏 82
37  生成CSS的注意事項(xiàng) 85
38  總結(jié) 86
第4章  輕松玩轉(zhuǎn)顏色  87
41  只定義一次顏色  88
42  變淺和加深函數(shù) 89
421  掌握HSL顏色標(biāo)準(zhǔn) 90
422  變淺和加深函數(shù)語(yǔ)法 91
43  標(biāo)簽修改和轉(zhuǎn)換 92
431 Compass的clear?x功能 93
44  再談?lì)伾?nbsp;95
441  混合宏里還有混合宏？這是什么新功能？  97
45  互補(bǔ)（和反色）函數(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  反對(duì)使用網(wǎng)格系統(tǒng)的各種說(shuō)法 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)建“移動(dòng)”響應(yīng)式網(wǎng)格系統(tǒng) 125
59  用Susy創(chuàng)建斷點(diǎn) 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  為什么會(huì)發(fā)生像素取整錯(cuò)誤 143
5152  容器相對(duì)布局 143
5153  標(biāo)準(zhǔn)Susy語(yǔ)法及輸出 143
分格混合宏 144
516  總結(jié) 146
第6章 Sass和混合宏中的高級(jí)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  將斷點(diǎn)定義為變量 151
64 MQ media query混合宏是如何工作的 153
65  各種情況的應(yīng)用 154
66  書寫行內(nèi)media queries 155
67 gzip和CSS壓縮=勝利！ 160
68  實(shí)際工程中行內(nèi)media queries和集合media queries的區(qū)別 161
69  復(fù)習(xí)CSS代碼 163
610  總結(jié) 165
第7章 Compass中的CSS3、Image Sprites等功能 167
71  用Compass混合宏輕松實(shí)現(xiàn)CSS3 168
711  文本陰影屬性的語(yǔ)法 168
使用默認(rèn)值的文本陰影 169
72 border-radius語(yǔ)法 170
73  復(fù)列 171
731  分列規(guī)則語(yǔ)法 172
732  盒子陰影混合宏 173
733  盒子陰影語(yǔ)法 173
734  多重盒子陰影 174
74  背景漸變 176
741  背景線性漸變語(yǔ)法 176
742  背景輻射漸變語(yǔ)法 178
743  組合漸變和背景圖像 178
75  用Compass image-url幫助工具添加背景圖像179
76  圖像寬度和高度幫助工具 180
761 Compass緩存消除功能 181
77 Compass的image sprites功能 182
771  其他sprite配置選項(xiàng) 185
為每個(gè)HTML選擇器添加高度和寬度 185
給圖像周圍添加額外的內(nèi)邊距 185
772  布局選項(xiàng) 186
78 Compass文本替代混合宏 186
781  文本隱藏混合宏 186
782 Squish-text混合宏 187
783  用圖像代替文本 188
79  為圖像創(chuàng)建數(shù)據(jù)URI 189
791  行內(nèi)圖像語(yǔ)法 191
710  不支持SVG格式設(shè)備的備選方法 192
711 CSS變形功能 193
712 CSS過濾器 196
713  過渡 197
714  總結(jié) 198
第8章 Sass的編程邏輯 199
81 Sass的數(shù)學(xué)計(jì)算 200
811  加法 200
812  減法 200
713  乘法 201
814  除法 201
815  使用變量進(jìn)行計(jì)算 203
82  控制命令及使用方法  203
821 @if和@else if控制命令 204
822 @for循環(huán) 205
823  計(jì)數(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插件來(lái)批量導(dǎo)入模塊文件 229
96  創(chuàng)建多個(gè)獨(dú)立的樣式表 230
97  將模塊文件轉(zhuǎn)換為獨(dú)立的樣式表 231
98 Compass統(tǒng)計(jì) 231
99  清空Sass緩存 233
910  一次性Compass編譯  234
911  小結(jié) 234
9111  修正人為錯(cuò)誤 234
9112  使用Lint工具發(fā)現(xiàn)常見問題 236
912  用工具和測(cè)試避免推斷 237
9121 Chrome開發(fā)者工具  237
持續(xù)頁(yè)面刷新 238
9122  查找沒被使用的樣式 240
913  循序漸進(jìn) 242
914  總結(jié) 243