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

時(shí)間：2023-02-20 13:56:01 | 來(lái)源：營(yíng)銷百科

時(shí)間：2023-02-20 13:56:01 來(lái)源：營(yíng)銷百科

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 通過(guò)命令行安裝和使用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
過(guò)度嵌套的危險(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ì)伾?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 子像素的四舍五入問(wèn)題 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過(guò)濾器 196
713 過(guò)渡 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)常見問(wèn)題 236
912 用工具和測(cè)試避免推斷 237
9121 Chrome開發(fā)者工具 237
持續(xù)頁(yè)面刷新 238
9122 查找沒(méi)被使用的樣式 240
913 循序漸進(jìn) 242
914 總結(jié) 243