Sass 与 Compass 实战 PDF 文档

Question

本书共分为 10 章，旨在完整介绍两个工具：Sass 和 Compass，从而引领读者通过框架高效地构建样式表，创建动态页面。本书介绍了 Sass 如何通过选择器嵌套和变量来帮助避免重复，以及通过继承和混合器等特性更加高效地重用通用样式，减少重复编写工作。学完本书后，你一定能对 Sass 和 Compass 有一个全面的理解。

如果你是 Web 设计师或者前端开发人员，那本书定能让你受益匪浅。

回顾一下做过的项目，会发现我们曾经多么忽视 CSS！JavaScript 有着高大上的设计模式和模块规范，分布在精心设计过的目录里，而 CSS 仅仅被简单地堆积在一个文件里。它不重要吗？前端开发最基本的任务就是还原设计，离不开用 CSS 实现那些复杂的布局和绚丽的效果（后面还会提到它在移动 Web 开发中的重要性）。它简单吗？HttpArchive 统计全球 Top100 网站平均单个页面CSS 达到 31 KB，在频繁的迭代中维护它们并不轻松。更不要说众所周知的痛点——浏览器兼容性。CSS 既然如此重要，又不简单，为什么没有像它的小伙伴 JavaScript 那样得到重视和发展呢？

目录
第一部分 认识 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 一个基本的 960 布局
3.4.2 在 Compass 中使用 960 网格布局
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 使用 CSS3
5.1 什么是 CSS3
5.1.1 新属性：浏览器前缀让你烦透了吧
5.1.2 让 Compass 拯救你
5.2 通过 Compass 使用 CSS3
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 小结
附录 A 安装 Sass 和 Compass
附录 B 开始使用 Compass
附录 C Sass 语法

下载地址：https://www.wenjiangs.com/wp-content/uploads/2024/02/HohoAoAzNiGKF8jP.zip