基本介紹
- 書名:Sass與Compass實戰
- 作者:尼德蘭Nathan Weizenbaum
- 出版日期:2014年6月1日
- 語種:簡體中文
- ISBN:7115353018
- 外文名:Sass and Compass in Action
- 出版社:人民郵電出版社
- 頁數:188頁
- 開本:16
基本介紹,內容簡介,作者簡介,媒體推薦,圖書目錄,
基本介紹
內容簡介
引入變數、混合器、選擇器嵌套、選擇器繼承等概念
為標準CSS添加了腳本功能和組件庫
幫助Web設計師和開發人員大幅度簡化樣式表編輯工作
Compass.app & Fire.app開發者薛良斌(布丁,hlb) 豆瓣前端負責人張克軍 鼎力推薦
為標準CSS添加了腳本功能和組件庫
幫助Web設計師和開發人員大幅度簡化樣式表編輯工作
Compass.app & Fire.app開發者薛良斌(布丁,hlb) 豆瓣前端負責人張克軍 鼎力推薦
作者簡介
Wynn Netherland 有近20年的Web從業經歷。他主筆和參與撰寫過許多Web開發方面的圖書。他喜歡在GitHub上工作,經常在行業會議上演講,並“出沒”於開發者聚會,有時候還會在屋後的門廊里彈吉他。
Nathan Weizenbaum 畢業於華盛頓大學,專業是計算機科學和哲學,他從Sass誕生之初就是首席開發者。目前,他是谷歌的軟體工程師,負責Gmail開發。
Chris Eppstein Compass框架的創建者,Sass核心團隊成員。畢業於加州理工學院,軟體工程師,有10年以上為矽谷創業公司創建網站和應用程式的經驗。痴迷於前端開發,目前在LinkedIn從事前端架構和開發者關係相關的工作。
Brandon Mathis Compass核心團隊成員,基於Jekyll的可擴展部落格框架Octopress的作者。他目前是MongoHQ的一名設計師。
Nathan Weizenbaum 畢業於華盛頓大學,專業是計算機科學和哲學,他從Sass誕生之初就是首席開發者。目前,他是谷歌的軟體工程師,負責Gmail開發。
Chris Eppstein Compass框架的創建者,Sass核心團隊成員。畢業於加州理工學院,軟體工程師,有10年以上為矽谷創業公司創建網站和應用程式的經驗。痴迷於前端開發,目前在LinkedIn從事前端架構和開發者關係相關的工作。
Brandon Mathis Compass核心團隊成員,基於Jekyll的可擴展部落格框架Octopress的作者。他目前是MongoHQ的一名設計師。
媒體推薦
”本書可以讓網頁設計師和開發人員從重複勞動中解放出來,體會撰寫CSS的樂趣。“
——薛良斌,Compass.app & Fire.app開發者
”我對本書的出版充滿期待,並相信它一定會把更多人帶入CSS的世界。“
——張克軍,豆瓣前端負責人
“Sass與Compass創建者提供的最重要的一手資料,必讀!”
——David A. Mosher, DAVEMO Consulting
“本書作者就是那些將CSS轉換成了更有趣內容的人。”
——Jeroen van Dijk, ADGOJI
“解決現實世界問題的優秀示例。”
——Jacob Rohde,Amino
——薛良斌,Compass.app & Fire.app開發者
”我對本書的出版充滿期待,並相信它一定會把更多人帶入CSS的世界。“
——張克軍,豆瓣前端負責人
“Sass與Compass創建者提供的最重要的一手資料,必讀!”
——David A. Mosher, DAVEMO Consulting
“本書作者就是那些將CSS轉換成了更有趣內容的人。”
——Jeroen van Dijk, ADGOJI
“解決現實世界問題的優秀示例。”
——Jacob Rohde,Amino
圖書目錄
第一部分 認識Sass和Compass
第1章 Sass和Compass讓樣式表重煥青春
1.1 開始學習Sass
1.1.1 從CSS到Sass
1.1.2 動態思維
1.1.3 別做重複勞動
1.2 Sass你好:消除樣式表冗餘
1.2.1 通過變數來復用屬性值
1.2.2 使用嵌套來快速寫出多層級的選擇器
1.2.3 使用混合器來復用一段樣式
1.2.4 使用選擇器繼承來避免重複屬性
1.3 Compass是什麼
1.3.1 Compass庫
1.3.2 簡單的Compass樣式項目
1.3.3 社區生態系統
1.4 創建一個Compass項目
1.5 使用Compass解決真實的CSS問題
1.5.1 通過重置來保持樣式表現一致
1.5.2 不用計算創建布局
1.5.3 通過表格輔助器為表格添加更專業的斑馬條紋樣式
1.5.4 CSS3屬性無需再寫廠商前綴
1.6 小結
第2章 Sass基礎語法
2.1 使用變數
2.1.1 變數聲明
2.1.2 變數引用
2.1.3 變數名用中劃線還是下劃線分隔
2.2 嵌套CSS規則
2.2.1 父選擇器的標識符&
2.2.2 群組選擇器的嵌套
2.2.3 子組合選擇器和同層組合選擇器:>、+和~
2.2.4 嵌套屬性
2.3 導入Sass檔案
2.3.1 使用Sass部分檔案
2.3.2 默認變數值
2.3.3 嵌套導入
2.3.4 原生的CSS導入
2.4 靜默注釋
2.5 混合器
2.5.1 何時使用混合器
2.5.2 混合器中的CSS規則
2.5.3 給混合器傳參
2.5.4 默認參數值
2.6 使用選擇器繼承來精簡CSS
2.6.1 何時使用繼承
2.6.2 繼承的高級用法
2.6.3 繼承的工作細節
2.6.4 使用繼承的最佳實踐
2.7 小結
第二部分 在實戰中使用Sass和Compass
第3章 無需計算玩轉CSS格線布局
3.1 格線布局介紹
3.1.1 不使用CSS格線布局或者不使用格線輔助設計
3.1.2 格線布局系統或框架及其工作原理
3.1.3 使用Sass和Compass進行格線布局
3.2 開始使用格線布局
3.2.1 術語
3.2.2 是否使用格線布局,要語義還是要實用
3.2.3 固定的格線布局還是流動的格線布局
3.3 使用Blueprint
3.3.1 使用原生CSS的Blueprint
3.3.2 使用Compass套用Blueprint
3.3.3 使用Compass套用無需類名的Blueprint
3.4 使用960格線布局系統
3.4.1 一個基本的布局
3.4.2 在Compass中使用格線布局
3.5 通過Compass處理垂直韻律
3.5.1 確定基線
3.5.2 前置和後置留白
3.6 小結
第4章 有Compass就不再枯燥
4.1 一張更好的白紙源自有針對性的樣式重置
4.1.1 全局樣式重置
4.1.2 通過有針對性的樣式重置進行更多控制
4.2 更快更直觀的排版工具
4.2.1 起錨遠航:連結輔助工具
4.2.2 創建各種各樣的列表
4.2.3 用輔助工具征服文字
4.3 布局輔助工具
4.3.1 粘滯的頁腳
4.3.2 可伸展元素
4.4 小結
第5章 通過Compass使用CSS
5.1 什麼是CSS3
5.1.1 新屬性:瀏覽器前綴讓你煩透了吧
5.1.2 讓Compass拯救你
5.2 通過Compass使用CSS
5.2.1 圓角
5.2.2 CSS3陰影
5.2.3 顏色漸變
5.2.4 用@font—face嵌入字型
5.3 通過CSS PIE支持IE
5.4 小結
第三部分 來到生產環境
第6章 精靈
6.1 精靈的工作原理
6.2 精靈的必要性
6.2.1 HTTP請求越少越好
6.2.2 手動處理是一種折磨
6.2.3 Compass的方案
6.3 用Compass製作精靈
6.3.1 創建一個精靈地圖
6.3.2 生成精靈的CSS
6.4 配置Compass精靈
6.4.1 自定義精靈地圖
6.4.2 自定義精靈的CSS
6.5 駕馭精靈輔助器
6.5.1 創建精靈地圖
6.5.2 撰寫精靈的CSS
6.6 小結
第7章 從原型到產品
7.1 絕對URL
7.1.1 生成URL資源
7.1.2 避免出現死鏈
7.1.3 通過快取清理避免舊圖片
7.2 用Sass和Compass做原型
7.2.1 簡化你的開發環境
7.2.2 直接在瀏覽器里設計
7.3 發布成產品
7.3.1 想不到吧!該挪窩了
7.3.2 為生產環境編譯
7.3.3 生成相對於域名的資源
7.3.4 添加著作權提示
7.3.5 發布CSS很簡單
7.3.6 跟源碼控制、發布流程配合在一起
7.3.7 和預發伺服器一起工作
7.4 小結
第8章 高性能式樣表
8.1 測量客戶端性能
8.2 迴避帶有伺服器端@import的HTTP請求
8.3 用壓縮減少傳輸時間
8.3.1 gzip壓縮
8.3.2 圖片壓縮
8.4 用資源託管提高頁面載入速度
8.4.1 使用資源託管生成URL
8.4.2 避免內容警告和基於域的資源相混合
8.5 內聯data URI
8.6 選擇器性能
8.6.1 積少成多的問題
8.6.2 過分嵌套的危險
8.7 小結
第四部分 高級Sass和Compass
第9章 用Sass編寫腳本
9.1 使用表達式
9.2 理解數據類型
9.2.1 字元串和名字
9.2.2 數值
9.2.3 顏色
9.2.4 列表
9.2.5 布爾值
9.3 函式
9.3.1 數值函式
9.3.2 顏色函式
9.3.3 列表函式
9.3.4 其他Sass函式
9.3.5 用戶自定義函式
9.4 在選擇器和屬性名中使用表達式
9.5 控制指令
9.5.1 對數字重複樣式
9.5.2 對列表重複樣式
9.5.3 條件樣式
9.6 小結
第10章 創建並分享一個Compass擴展
10.1 分享和重用樣式表
10.1.1 Sass比CSS更容易分享
10.1.2 分享Sass
10.1.3 分享Sass是遠遠不夠的
10.1.4 為什麼使用Compass擴展
10.2 一個簡單的擴展
10.2.1 安裝ad hoc擴展
10.2.2 測試你的擴展
10.3 創建擴展演示項目
10.4 編寫高級擴展
10.4.1 自動化完成困難的部分
10.4.2 重構你的擴展
10.5 創建一個模板
10.6 分發擴展
10.6.1 在存檔中分發擴展
10.6.2 將擴展作為Ruby gem分發
10.6.3 在Github上進行代碼社交
10.7 小結 173
附錄A 安裝Sass和Compass
附錄B 開始使用Compass
附錄C Sass語法
第1章 Sass和Compass讓樣式表重煥青春
1.1 開始學習Sass
1.1.1 從CSS到Sass
1.1.2 動態思維
1.1.3 別做重複勞動
1.2 Sass你好:消除樣式表冗餘
1.2.1 通過變數來復用屬性值
1.2.2 使用嵌套來快速寫出多層級的選擇器
1.2.3 使用混合器來復用一段樣式
1.2.4 使用選擇器繼承來避免重複屬性
1.3 Compass是什麼
1.3.1 Compass庫
1.3.2 簡單的Compass樣式項目
1.3.3 社區生態系統
1.4 創建一個Compass項目
1.5 使用Compass解決真實的CSS問題
1.5.1 通過重置來保持樣式表現一致
1.5.2 不用計算創建布局
1.5.3 通過表格輔助器為表格添加更專業的斑馬條紋樣式
1.5.4 CSS3屬性無需再寫廠商前綴
1.6 小結
第2章 Sass基礎語法
2.1 使用變數
2.1.1 變數聲明
2.1.2 變數引用
2.1.3 變數名用中劃線還是下劃線分隔
2.2 嵌套CSS規則
2.2.1 父選擇器的標識符&
2.2.2 群組選擇器的嵌套
2.2.3 子組合選擇器和同層組合選擇器:>、+和~
2.2.4 嵌套屬性
2.3 導入Sass檔案
2.3.1 使用Sass部分檔案
2.3.2 默認變數值
2.3.3 嵌套導入
2.3.4 原生的CSS導入
2.4 靜默注釋
2.5 混合器
2.5.1 何時使用混合器
2.5.2 混合器中的CSS規則
2.5.3 給混合器傳參
2.5.4 默認參數值
2.6 使用選擇器繼承來精簡CSS
2.6.1 何時使用繼承
2.6.2 繼承的高級用法
2.6.3 繼承的工作細節
2.6.4 使用繼承的最佳實踐
2.7 小結
第二部分 在實戰中使用Sass和Compass
第3章 無需計算玩轉CSS格線布局
3.1 格線布局介紹
3.1.1 不使用CSS格線布局或者不使用格線輔助設計
3.1.2 格線布局系統或框架及其工作原理
3.1.3 使用Sass和Compass進行格線布局
3.2 開始使用格線布局
3.2.1 術語
3.2.2 是否使用格線布局,要語義還是要實用
3.2.3 固定的格線布局還是流動的格線布局
3.3 使用Blueprint
3.3.1 使用原生CSS的Blueprint
3.3.2 使用Compass套用Blueprint
3.3.3 使用Compass套用無需類名的Blueprint
3.4 使用960格線布局系統
3.4.1 一個基本的布局
3.4.2 在Compass中使用格線布局
3.5 通過Compass處理垂直韻律
3.5.1 確定基線
3.5.2 前置和後置留白
3.6 小結
第4章 有Compass就不再枯燥
4.1 一張更好的白紙源自有針對性的樣式重置
4.1.1 全局樣式重置
4.1.2 通過有針對性的樣式重置進行更多控制
4.2 更快更直觀的排版工具
4.2.1 起錨遠航:連結輔助工具
4.2.2 創建各種各樣的列表
4.2.3 用輔助工具征服文字
4.3 布局輔助工具
4.3.1 粘滯的頁腳
4.3.2 可伸展元素
4.4 小結
第5章 通過Compass使用CSS
5.1 什麼是CSS3
5.1.1 新屬性:瀏覽器前綴讓你煩透了吧
5.1.2 讓Compass拯救你
5.2 通過Compass使用CSS
5.2.1 圓角
5.2.2 CSS3陰影
5.2.3 顏色漸變
5.2.4 用@font—face嵌入字型
5.3 通過CSS PIE支持IE
5.4 小結
第三部分 來到生產環境
第6章 精靈
6.1 精靈的工作原理
6.2 精靈的必要性
6.2.1 HTTP請求越少越好
6.2.2 手動處理是一種折磨
6.2.3 Compass的方案
6.3 用Compass製作精靈
6.3.1 創建一個精靈地圖
6.3.2 生成精靈的CSS
6.4 配置Compass精靈
6.4.1 自定義精靈地圖
6.4.2 自定義精靈的CSS
6.5 駕馭精靈輔助器
6.5.1 創建精靈地圖
6.5.2 撰寫精靈的CSS
6.6 小結
第7章 從原型到產品
7.1 絕對URL
7.1.1 生成URL資源
7.1.2 避免出現死鏈
7.1.3 通過快取清理避免舊圖片
7.2 用Sass和Compass做原型
7.2.1 簡化你的開發環境
7.2.2 直接在瀏覽器里設計
7.3 發布成產品
7.3.1 想不到吧!該挪窩了
7.3.2 為生產環境編譯
7.3.3 生成相對於域名的資源
7.3.4 添加著作權提示
7.3.5 發布CSS很簡單
7.3.6 跟源碼控制、發布流程配合在一起
7.3.7 和預發伺服器一起工作
7.4 小結
第8章 高性能式樣表
8.1 測量客戶端性能
8.2 迴避帶有伺服器端@import的HTTP請求
8.3 用壓縮減少傳輸時間
8.3.1 gzip壓縮
8.3.2 圖片壓縮
8.4 用資源託管提高頁面載入速度
8.4.1 使用資源託管生成URL
8.4.2 避免內容警告和基於域的資源相混合
8.5 內聯data URI
8.6 選擇器性能
8.6.1 積少成多的問題
8.6.2 過分嵌套的危險
8.7 小結
第四部分 高級Sass和Compass
第9章 用Sass編寫腳本
9.1 使用表達式
9.2 理解數據類型
9.2.1 字元串和名字
9.2.2 數值
9.2.3 顏色
9.2.4 列表
9.2.5 布爾值
9.3 函式
9.3.1 數值函式
9.3.2 顏色函式
9.3.3 列表函式
9.3.4 其他Sass函式
9.3.5 用戶自定義函式
9.4 在選擇器和屬性名中使用表達式
9.5 控制指令
9.5.1 對數字重複樣式
9.5.2 對列表重複樣式
9.5.3 條件樣式
9.6 小結
第10章 創建並分享一個Compass擴展
10.1 分享和重用樣式表
10.1.1 Sass比CSS更容易分享
10.1.2 分享Sass
10.1.3 分享Sass是遠遠不夠的
10.1.4 為什麼使用Compass擴展
10.2 一個簡單的擴展
10.2.1 安裝ad hoc擴展
10.2.2 測試你的擴展
10.3 創建擴展演示項目
10.4 編寫高級擴展
10.4.1 自動化完成困難的部分
10.4.2 重構你的擴展
10.5 創建一個模板
10.6 分發擴展
10.6.1 在存檔中分發擴展
10.6.2 將擴展作為Ruby gem分發
10.6.3 在Github上進行代碼社交
10.7 小結 173
附錄A 安裝Sass和Compass
附錄B 開始使用Compass
附錄C Sass語法