本書是《回響式Web設計：HTML5和CSS3實戰》作者Ben Frain的又一力作。作者通過豐富、完整的案例，循序漸進地展示了Sass和Compass的使用方法。既使不懂編程的設計師讀完本書也能輕鬆生成跨瀏覽器的、易於維護的CSS代碼，並學會編寫media query代碼，進行回響式設計。本書適合互動設計師、UI設計師、網頁設計師、前端開發工程師閱讀。
基本介紹
- 書名：Sass和Compass設計師指南
- 作者：Ben Frain
- 類型：藝術
- 出版日期：2014年4月25日
- 語種：簡體中文
- ISBN：9787560999302, 7560999301
- 外文名：Sass and Compass for Designers
- 譯者：任凱光
- 出版社：華中科技大學出版社
- 頁數：272頁
- 開本：16
- 品牌：華中科技大學出版社
基本介紹,內容簡介,作者簡介,圖書目錄,序言,
基本介紹
內容簡介
作為CSS預處理器，Sass已經成為編寫更簡潔、更易於維護的跨瀏覽器支持的CSS代碼的標準方法。它是對CSS功能的進一步增強，使以往複雜費時的任務變得簡單。本書是對技術社區中精華內容的提煉，內容通俗直接，使廣大讀者，即使是只了解HTML和CSS的讀者都能輕鬆掌握相關技術。
作者簡介
本·弗萊恩（Ben Frain）從1996年起就開始從事前端開發，他同時也是一名技術專欄作者，經常為很多媒體平台（Mac 平台、消費者技術、網站設計、航天工業）撰稿。
圖書目錄
第1章 Sass和Compass概述 7
11 為什麼需要CSS預處理器 8
111 如果最終生成的是CSS代碼，為什麼不乾脆手寫CSS？ 9
12 為什麼應該用Sass和Compass 9
121 使用變數（每個屬性值只需要定義一次） 10
理解變數語法 10
122 自動轉換的RGBA顏色值 11
123 忘記瀏覽器前綴 12
124 嵌套規則 12
125 Media queries變得更加簡單 13
126 自動壓縮CSS從而實現快速建站 15
13 什麼是Sass 15
14 什麼是Compass 17
15 安裝Sass和Compass 17
151 OS X系統安裝方法 18
16 通過命令行安裝和使用Sass和Compass 19
161 在Windows下安裝Ruby 19
162 運行gem命令 19
163 Mac OS X命令安裝 20
164 Windows命令行安裝 21
165 檢查你的Sass和Compass版本 22
166 檢查有哪些Sass和Compass版本可用 23
167 安裝最新版本的Sass和Compass（包括預發布版本） 23
168 從命令行創建Sass和Compass工程 24
169 命令行自動編譯功能 26
17 使用圖形界面軟體運行Sass 和 Compass 26
171 Scout app 27
172 CodeKit 27
173 LiveReload 28
18 在文本編輯器下使用Sass檔案 30
19 小結 31
第2章 創建Sass和Compass工程 33
21 創建Sass和Compass工程 34
211 創建Compass工程 35
創建定製化的Compass工程36
創建空的Compass工程37
22 理解configrb檔案 38
221 添加需要的外掛程式 40
222 為工程資源設定名稱和路徑 40
223 設定CSS輸出樣式 41
嵌套輸出選項 41
緊密輸出方式 42
壓縮輸出方式 43
去掉注釋，保持樣式 43
壓縮CSS，保持注釋（凸顯注釋） 44
打開相對資源路徑功能 44
23 創建和使用模組檔案 45
231 Sass提供可維護的生產性代碼 46
232 導入模組檔案 48
233 Sass中書寫變數的語法 49
24 Sass注釋格式 50
241 標準CSS注釋 50
242 Sass單行注釋 50
25 基礎的indexhtml檔案51
26 未來工程的基礎構架 52
27 總結 53
第3章 嵌套，擴展，占位符和混合宏 55
31 用Sass和Compass給網站添加樣式 55
目錄 9
32 從視覺上分割布局 57
33 什麼是嵌套？它是如何實現代碼模組化的？ 60
331 嵌套語法 60
父級選擇器 64
級聯選擇器 65
332 使用父級選擇器輕鬆添加Modernizr樣式 66
給字型定義一個模組檔案 67
用Modernizr和父級選擇器改變字型 68
過度嵌套的危險 69
ID選擇器不好？ 71
333 嵌套命名空間 72
34 使用@extend命令擴展現有代碼 75
35 使用占位符選擇器來擴展需要的樣式 77
36 什麼是混合宏？如何使用混合宏來輕鬆生成常用代碼？ 78
361 混合宏的基本語法 80
362 如何用默認值寫混合宏 82
37 生成CSS的注意事項 85
38 總結 86
第4章 輕鬆玩轉顏色 87
41 只定義一次顏色 88
42 變淺和加深函式 89
421 掌握HSL顏色標準 90
422 變淺和加深函式語法 91
43 標籤修改和轉換 92
431 Compass的clearfix功能 93
44 再談顏色 95
441 混合宏里還有混合宏？這是什麼新功能？ 97
45 互補（和反色）函式 101
46 反色函式 102
47 色調調節函式 102
48 飽和函式和去飽和函式 103
49 透明化函式和漸隱函式 105
410 不透明化函式和漸現函式 106
411 灰度函式 106
412 rgba函式 107
413 混合函式 108
414 調色函式 109
415 比例調色函式 110
416 遮陰函式和增亮函式 112
417 綜合利用函式 113
418 總結 114
第5章 Sass和Compass的回響式彈性格線系統 115
51 反對使用格線系統的各種說法 116
52 為什麼使用格線系統 117
53 什麼是Susy? 117
531 Susy到底是做什麼的？ 118
54 安裝Susy Compass外掛程式 119
55 在工程中引入Susy 120
551 Susy工程變數 120
56 創建Susy格線系統 121
57 為格線系統定義背景 122
571 顯示格線背景 123
572 給Susy設定border-box屬性 124
58 創建“移動”回響式格線系統 125
59 用Susy創建斷點 125
510 創建流體格線系統 131
511 創建靜態的“固定化”格線系統 132
512 使用Susy格線幫助工具 132
5121 Prefix、Suffix和Pad 133
5122 Prefix 133
5123 Suffix 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 格線內嵌套格線 138
5141 nth-omega混合宏 139
515 子像素的四捨五入問題 142
目錄 11
5151 為什麼會發生像素取整錯誤 143
5152 容器相對布局 143
5153 標準Susy語法及輸出 143
分格混合宏 144
516 總結 146
第6章 Sass和混合宏中的高級media queries 147
61 Sass中的Media queries 148
611 使用media query模組檔案分離media query樣式 149
62 Sass的行內media queries 149
63 創建混合宏輕鬆處理media queries 151
631 將斷點定義為變數 151
64 MQ media query混合宏是如何工作的 153
65 各種情況的套用 154
66 書寫行內media queries 155
67 gzip和CSS壓縮=勝利！ 160
68 實際工程中行內media queries和集合media queries的區別 161
69 複習CSS代碼 163
610 總結 165
第7章 Compass中的CSS3、Image Sprites等功能 167
71 用Compass混合宏輕鬆實現CSS3 168
711 文本陰影屬性的語法 168
使用默認值的文本陰影 169
72 border-radius語法 170
73 複列 171
731 分列規則語法 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
給圖像周圍添加額外的內邊距 185
772 布局選項 186
78 Compass文本替代混合宏 186
781 文本隱藏混合宏 186
782 Squish-text混合宏 187
783 用圖像代替文本 188
79 為圖像創建數據URI 189
791 行內圖像語法 191
710 不支持SVG格式設備的備選方法 192
711 CSS變形功能 193
712 CSS過濾器 196
713 過渡 197
714 總結 198
第8章 Sass的編程邏輯 199
81 Sass的數學計算 200
811 加法 200
812 減法 200
713 乘法 201
814 除法 201
815 使用變數進行計算 203
82 控制命令及使用方法 203
821 @if和@else if控制命令 204
822 @for循環 205
823 計數器變數 207
824 from to和from through 207
插入功能 208
825 @each循環 209
83 給數值去除和添加單位 213
831 從數值上去除單位 213
832 給變數值添加單位 213
84 在Sass中寫函式 214
841 相等操作符 215
842 關係操作符 215
843 @return 216
844 使用函式的返回結果 216
85 使用@debug命令 216
86 @warn命令 219
87 總結 219
第9章 精通Sass和Compass 221
91 關閉指定瀏覽器的Compass支持功能 222
911 配置支持變數 223
912 基於WebKit核心的Opera 225
92 為最新發布的CSS屬性提供支持 225
93 定義最新屬性值 227
94 Sass互動式shell 228
941 Compass互動 229
95 添加Sass globbing外掛程式來批量導入模組檔案 229
96 創建多個獨立的樣式表 230
97 將模組檔案轉換為獨立的樣式表 231
98 Compass統計 231
99 清空Sass快取 233
910 一次性Compass編譯 234
911 小結 234
9111 修正人為錯誤 234
9112 使用Lint工具發現常見問題 236
912 用工具和測試避免推斷 237
9121 Chrome開發者工具 237
持續頁面刷新 238
9122 查找沒被使用的樣式 240
913 循序漸進 242
914 總結 243
11 為什麼需要CSS預處理器 8
111 如果最終生成的是CSS代碼，為什麼不乾脆手寫CSS？ 9
12 為什麼應該用Sass和Compass 9
121 使用變數（每個屬性值只需要定義一次） 10
理解變數語法 10
122 自動轉換的RGBA顏色值 11
123 忘記瀏覽器前綴 12
124 嵌套規則 12
125 Media queries變得更加簡單 13
126 自動壓縮CSS從而實現快速建站 15
13 什麼是Sass 15
14 什麼是Compass 17
15 安裝Sass和Compass 17
151 OS X系統安裝方法 18
16 通過命令行安裝和使用Sass和Compass 19
161 在Windows下安裝Ruby 19
162 運行gem命令 19
163 Mac OS X命令安裝 20
164 Windows命令行安裝 21
165 檢查你的Sass和Compass版本 22
166 檢查有哪些Sass和Compass版本可用 23
167 安裝最新版本的Sass和Compass（包括預發布版本） 23
168 從命令行創建Sass和Compass工程 24
169 命令行自動編譯功能 26
17 使用圖形界面軟體運行Sass 和 Compass 26
171 Scout app 27
172 CodeKit 27
173 LiveReload 28
18 在文本編輯器下使用Sass檔案 30
19 小結 31
第2章 創建Sass和Compass工程 33
21 創建Sass和Compass工程 34
211 創建Compass工程 35
創建定製化的Compass工程36
創建空的Compass工程37
22 理解configrb檔案 38
221 添加需要的外掛程式 40
222 為工程資源設定名稱和路徑 40
223 設定CSS輸出樣式 41
嵌套輸出選項 41
緊密輸出方式 42
壓縮輸出方式 43
去掉注釋，保持樣式 43
壓縮CSS，保持注釋（凸顯注釋） 44
打開相對資源路徑功能 44
23 創建和使用模組檔案 45
231 Sass提供可維護的生產性代碼 46
232 導入模組檔案 48
233 Sass中書寫變數的語法 49
24 Sass注釋格式 50
241 標準CSS注釋 50
242 Sass單行注釋 50
25 基礎的indexhtml檔案51
26 未來工程的基礎構架 52
27 總結 53
第3章 嵌套，擴展，占位符和混合宏 55
31 用Sass和Compass給網站添加樣式 55
目錄 9
32 從視覺上分割布局 57
33 什麼是嵌套？它是如何實現代碼模組化的？ 60
331 嵌套語法 60
父級選擇器 64
級聯選擇器 65
332 使用父級選擇器輕鬆添加Modernizr樣式 66
給字型定義一個模組檔案 67
用Modernizr和父級選擇器改變字型 68
過度嵌套的危險 69
ID選擇器不好？ 71
333 嵌套命名空間 72
34 使用@extend命令擴展現有代碼 75
35 使用占位符選擇器來擴展需要的樣式 77
36 什麼是混合宏？如何使用混合宏來輕鬆生成常用代碼？ 78
361 混合宏的基本語法 80
362 如何用默認值寫混合宏 82
37 生成CSS的注意事項 85
38 總結 86
第4章 輕鬆玩轉顏色 87
41 只定義一次顏色 88
42 變淺和加深函式 89
421 掌握HSL顏色標準 90
422 變淺和加深函式語法 91
43 標籤修改和轉換 92
431 Compass的clearfix功能 93
44 再談顏色 95
441 混合宏里還有混合宏？這是什麼新功能？ 97
45 互補（和反色）函式 101
46 反色函式 102
47 色調調節函式 102
48 飽和函式和去飽和函式 103
49 透明化函式和漸隱函式 105
410 不透明化函式和漸現函式 106
411 灰度函式 106
412 rgba函式 107
413 混合函式 108
414 調色函式 109
415 比例調色函式 110
416 遮陰函式和增亮函式 112
417 綜合利用函式 113
418 總結 114
第5章 Sass和Compass的回響式彈性格線系統 115
51 反對使用格線系統的各種說法 116
52 為什麼使用格線系統 117
53 什麼是Susy? 117
531 Susy到底是做什麼的？ 118
54 安裝Susy Compass外掛程式 119
55 在工程中引入Susy 120
551 Susy工程變數 120
56 創建Susy格線系統 121
57 為格線系統定義背景 122
571 顯示格線背景 123
572 給Susy設定border-box屬性 124
58 創建“移動”回響式格線系統 125
59 用Susy創建斷點 125
510 創建流體格線系統 131
511 創建靜態的“固定化”格線系統 132
512 使用Susy格線幫助工具 132
5121 Prefix、Suffix和Pad 133
5122 Prefix 133
5123 Suffix 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 格線內嵌套格線 138
5141 nth-omega混合宏 139
515 子像素的四捨五入問題 142
目錄 11
5151 為什麼會發生像素取整錯誤 143
5152 容器相對布局 143
5153 標準Susy語法及輸出 143
分格混合宏 144
516 總結 146
第6章 Sass和混合宏中的高級media queries 147
61 Sass中的Media queries 148
611 使用media query模組檔案分離media query樣式 149
62 Sass的行內media queries 149
63 創建混合宏輕鬆處理media queries 151
631 將斷點定義為變數 151
64 MQ media query混合宏是如何工作的 153
65 各種情況的套用 154
66 書寫行內media queries 155
67 gzip和CSS壓縮=勝利！ 160
68 實際工程中行內media queries和集合media queries的區別 161
69 複習CSS代碼 163
610 總結 165
第7章 Compass中的CSS3、Image Sprites等功能 167
71 用Compass混合宏輕鬆實現CSS3 168
711 文本陰影屬性的語法 168
使用默認值的文本陰影 169
72 border-radius語法 170
73 複列 171
731 分列規則語法 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
給圖像周圍添加額外的內邊距 185
772 布局選項 186
78 Compass文本替代混合宏 186
781 文本隱藏混合宏 186
782 Squish-text混合宏 187
783 用圖像代替文本 188
79 為圖像創建數據URI 189
791 行內圖像語法 191
710 不支持SVG格式設備的備選方法 192
711 CSS變形功能 193
712 CSS過濾器 196
713 過渡 197
714 總結 198
第8章 Sass的編程邏輯 199
81 Sass的數學計算 200
811 加法 200
812 減法 200
713 乘法 201
814 除法 201
815 使用變數進行計算 203
82 控制命令及使用方法 203
821 @if和@else if控制命令 204
822 @for循環 205
823 計數器變數 207
824 from to和from through 207
插入功能 208
825 @each循環 209
83 給數值去除和添加單位 213
831 從數值上去除單位 213
832 給變數值添加單位 213
84 在Sass中寫函式 214
841 相等操作符 215
842 關係操作符 215
843 @return 216
844 使用函式的返回結果 216
85 使用@debug命令 216
86 @warn命令 219
87 總結 219
第9章 精通Sass和Compass 221
91 關閉指定瀏覽器的Compass支持功能 222
911 配置支持變數 223
912 基於WebKit核心的Opera 225
92 為最新發布的CSS屬性提供支持 225
93 定義最新屬性值 227
94 Sass互動式shell 228
941 Compass互動 229
95 添加Sass globbing外掛程式來批量導入模組檔案 229
96 創建多個獨立的樣式表 230
97 將模組檔案轉換為獨立的樣式表 231
98 Compass統計 231
99 清空Sass快取 233
910 一次性Compass編譯 234
911 小結 234
9111 修正人為錯誤 234
9112 使用Lint工具發現常見問題 236
912 用工具和測試避免推斷 237
9121 Chrome開發者工具 237
持續頁面刷新 238
9122 查找沒被使用的樣式 240
913 循序漸進 242
914 總結 243
序言
在過去的幾年裡，我設計工作中的很大一部分就是用HTML和CSS出圖。漸漸地我掌握了寫代碼的技能，並且能通過編寫或重寫CSS代碼迅速實現很多設計理念。因此我慢慢意識到，我需要更快、更流暢地編寫代碼，所以我開始尋找合適的工具來提高編寫代碼的效率。
回過頭看，選擇Sass真是一個明智的決定，如今我無法想像沒有Sass光靠手寫CSS代碼會是什麼樣的情況。它的擴展性、疊代選擇器、變數、混合宏，甚至管理顏色的方式都十分好用。但是，為了精通Sass，我還是花了不少功夫的。
這就是為什麼我真的希望當初學習Sass時能擁有這本書！本·弗萊恩是一位難得的前端開發天才，他能夠將複雜的概念用最簡單的語言解釋清楚。作為一名設計師，我能感覺到他在寫這本書時的用心，站在設計師和開發人員的角度詳盡解釋了所有問題。我相信大家讀完本書後都能感覺得到。
我希望，不，我確信，你會和我一樣喜歡上這本書。
——安德魯·克拉克（Andrew Clarke）
安德魯·克拉克在Stuff and Nonsense任職，是一名web設計師。他是暢銷書《Transcending CSS》和《Hardboiled Web Design》的作者，同時也是Unfinished Business的發起人之一。
回過頭看，選擇Sass真是一個明智的決定，如今我無法想像沒有Sass光靠手寫CSS代碼會是什麼樣的情況。它的擴展性、疊代選擇器、變數、混合宏，甚至管理顏色的方式都十分好用。但是，為了精通Sass，我還是花了不少功夫的。
這就是為什麼我真的希望當初學習Sass時能擁有這本書！本·弗萊恩是一位難得的前端開發天才，他能夠將複雜的概念用最簡單的語言解釋清楚。作為一名設計師，我能感覺到他在寫這本書時的用心，站在設計師和開發人員的角度詳盡解釋了所有問題。我相信大家讀完本書後都能感覺得到。
我希望，不，我確信，你會和我一樣喜歡上這本書。
——安德魯·克拉克（Andrew Clarke）
安德魯·克拉克在Stuff and Nonsense任職，是一名web設計師。他是暢銷書《Transcending CSS》和《Hardboiled Web Design》的作者，同時也是Unfinished Business的發起人之一。
