Sass和Compass设计师指南_前端开发教程
资源名称:Sass和Compass设计师指南
内容简介:
本书是《响应式Web设计:HTML5和CSS3实战》作者Ben Frain的又一力作。作者通过丰富、完整的案例,循序渐进地展示了Sass和Compass的使用方法。既使不懂编程的设计师读完本书也能轻松生成跨浏览器的、易于维护的CSS代码,并学会编写media query代码,进行响应式设计。本书适合交互设计师、UI设计师、网页设计师、前端开发工程师阅读。
资源目录:
第1章 Sass和Compass概述
11 为什么需要CSS预处理器
111 如果最终生成的是CSS代码,为什么不干脆手写CSS?
12 为什么应该用Sass和Compass
121 使用变量(每个属性值只需要定义一次)
理解变量语法
122 自动转换的RGBA颜色值
123 忘记浏览器前缀
124 嵌套规则
125 Media queries变得更加简单
126 自动压缩CSS从而实现快速建站
13 什么是Sass
14 什么是Compass
15 安装Sass和Compass
151 OS X系统安装方法
16 通过命令行安装和使用Sass和Compass
161 在Windows下安装Ruby
162 运行gem命令
163 Mac OS X命令安装
164 Windows命令行安装
165 检查你的Sass和Compass版本
166 检查有哪些Sass和Compass版本可用
167 安装最新版本的Sass和Compass(包括预发布版本)
168 从命令行创建Sass和Compass工程
169 命令行自动编译功能
17 使用图形界面软件运行Sass 和 Compass
171 Scout app
172 CodeKit
173 LiveReload
18 在文本编辑器下使用Sass文件
19 小结
第2章 创建Sass和Compass工程
21 创建Sass和Compass工程
211 创建Compass工程
创建定制化的Compass工程
创建空的Compass工程
22 理解con?grb文件
221 添加需要的插件
222 为工程资源设定名称和路径
223 设定CSS输出样式
嵌套输出选项
紧密输出方式
压缩输出方式
去掉注释,保持样式
压缩CSS,保持注释(凸显注释)
打开相对资源路径功能
23 创建和使用模块文件
231 Sass提供可维护的生产性代码
232 导入模块文件
233 Sass中书写变量的语法
24 Sass注释格式
241 标准CSS注释
242 Sass单行注释
25 基础的indexhtml文件
26 未来工程的基础构架
27 总结
第3章 嵌套,扩展,占位符和混合宏
31 用Sass和Compass给网站添加样式
目录
32 从视觉上分割布局
33 什么是嵌套?它是如何实现代码模块化的?
331 嵌套语法
父级选择器
级联选择器
332 使用父级选择器轻松添加Modernizr样式
给字体定义一个模块文件
用Modernizr和父级选择器改变字体
过度嵌套的危险
ID选择器不好?
333 嵌套命名空间
34 使用@extend命令扩展现有代码
35 使用占位符选择器来扩展需要的样式
36 什么是混合宏?如何使用混合宏来轻松生成常用代码?
361 混合宏的基本语法
362 如何用默认值写混合宏
37 生成CSS的注意事项
38 总结
第4章 轻松玩转颜色
41 只定义一次颜色
42 变浅和加深函数
421 掌握HSL颜色标准
422 变浅和加深函数语法
43 标签修改和转换
431 Compass的clear?x功能
44 再谈颜色
441 混合宏里还有混合宏?这是什么新功能?
45 互补(和反色)函数
46 反色函数
47 色调调节函数
48 饱和函数和去饱和函数
49 透明化函数和渐隐函数
410 不透明化函数和渐现函数
411 灰度函数
412 rgba函数
413 混合函数
414 调色函数
415 比例调色函数
416 遮阴函数和增亮函数
417 综合利用函数
418 总结
第5章 Sass和Compass的响应式弹性网格系统
51 反对使用网格系统的各种说法
52 为什么使用网格系统
53 什么是Susy?
531 Susy到底是做什么的?
54 安装Susy Compass插件
55 在工程中引入Susy
551 Susy工程变量
56 创建Susy网格系统
57 为网格系统定义背景
571 显示网格背景
572 给Susy设置border-box属性
58 创建“移动”响应式网格系统
59 用Susy创建断点
510 创建流体网格系统
511 创建静态的“固定化”网格系统
512 使用Susy网格帮助工具
5121 Pre?x、Suf?x和Pad
5122 Pre?x
5123 Suf?x
5124 Pad
513 Pre, Post, Squish, Push和Pull
5131 Pre
5132 Post
5133 Squish
5134 Push和Pull
514 网格内嵌套网格
5141 nth-omega混合宏
515 子像素的四舍五入问题
5151 为什么会发生像素取整错误
5152 容器相对布局
5153 标准Susy语法及输出
分格混合宏
516 总结
第6章 Sass和混合宏中的高级media queries
61 Sass中的Media queries
611 使用media query模块文件分离media query样式
62 Sass的行内media queries
63 创建混合宏轻松处理media queries
631 将断点定义为变量
64 MQ media query混合宏是如何工作的
65 各种情况的应用
66 书写行内media queries
67 gzip和CSS压缩=胜利!
68 实际工程中行内media queries和集合media queries的区别
69 复习CSS代码
610 总结
第7章 Compass中的CSS3、Image Sprites等功能
71 用Compass混合宏轻松实现CSS3
711 文本阴影属性的语法
使用默认值的文本阴影
72 border-radius语法
73 复列
731 分列规则语法
732 盒子阴影混合宏
733 盒子阴影语法
734 多重盒子阴影
74 背景渐变
741 背景线性渐变语法
742 背景辐射渐变语法
743 组合渐变和背景图像
75 用Compass image-url帮助工具添加背景图像
76 图像宽度和高度帮助工具
761 Compass缓存消除功能
77 Compass的image sprites功能
771 其他sprite配置选项
为每个HTML选择器添加高度和宽度
给图像周围添加额外的内边距
772 布局选项
78 Compass文本替代混合宏
781 文本隐藏混合宏
782 Squish-text混合宏
783 用图像代替文本
79 为图像创建数据URI
791 行内图像语法
710 不支持SVG格式设备的备选方法
711 CSS变形功能
712 CSS过滤器
713 过渡
714 总结
第8章 Sass的编程逻辑
81 Sass的数学计算
811 加法
812 减法
713 乘法
814 除法
815 使用变量进行计算
82 控制命令及使用方法
821 @if和@else if控制命令
822 @for循环
823 计数器变量
824 from to和from through
插入功能
825 @each循环
83 给数值去除和添加单位
831 从数值上去除单位
832 给变量值添加单位
84 在Sass中写函数
841 相等操作符
842 关系操作符
843 @return
844 使用函数的返回结果
85 使用@debug命令
86 @warn命令
87 总结
第9章 精通Sass和Compass
91 关闭指定浏览器的Compass支持功能
911 配置支持变量
912 基于WebKit内核的Opera
92 为最新发布的CSS属性提供支持
93 定义最新属性值
94 Sass交互式shell
941 Compass交互
95 添加Sass globbing插件来批量导入模块文件
96 创建多个独立的样式表
97 将模块文件转换为独立的样式表
98 Compass统计
99 清空Sass缓存
910 一次性Compass编译
911 小结
9111 修正人为错误
9112 使用Lint工具发现常见问题
912 用工具和测试避免推断
9121 Chrome开发者工具
持续页面刷新
9122 查找没被使用的样式
913 循序渐进
914 总结
资源截图: