Sass和Compass设计师指南

出版日期:2014-4-25
ISBN:9787560999301
作者:Ben Frain
页数:272页

内容概要

Ben Frain是具有十多年经验的网页设计师和前端工程师,直接与世界各地的客户和设计机构并肩工作。同时他还是一名技术记者,定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。
在此之前,他曾是一名怀才不遇的(而且谦虚谨慎的)电视演员,毕业于索尔福德大学的媒体与表演专业。他写了四部(自认为)被低估的剧本,而且始终心怀能卖出一部的信念(尽管不像最初那么强烈了)。
工作之余,在身体(和妻子)允许的情况下,他喜欢玩室内足球。 他的个人网站是www.benfrain.com,他的Twitter是twitter.com/benfrain。

书籍目录

第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

作者简介

本书是《响应式Web设计:HTML5和CSS3实战》作者Ben Frain的又一力作。作者通过丰富、完整的案例,循序渐进地展示了Sass和Compass的使用方法。既使不懂编程的设计师读完本书也能轻松生成跨浏览器的、易于维护的CSS代码,并学会编写media query代码,进行响应式设计。本书适合交互设计师、UI设计师、网页设计师、前端开发工程师阅读。


 Sass和Compass设计师指南下载 更多精彩书评



发布书评

 
 


精彩书评 (总计7条)

  •     对于sass和compass,我已经不是第一次接触了,但是,确实讲的最通俗易懂的一次。以前在多掌握技术的心理下,看过别人写的sass和less的比较;大致的意思就是有了sass你的css开发将快的你受不了。但是,可能由于自己比较偏向后台,很少写css的缘故吧,没弄明白,既然sass最后要转成css,为什么不直接写css呢?搞那么复杂干嘛,看了本书的样章后,原来在实际开发中,它的作用就是给你省钱,时间就是金钱嘛。弄明白,为什么要学它才能学的有动力吧!接下来就是安装和使用,在讲解过程中,不仅讲清楚了应该怎么做,而且更重要的是讲明白了我为什么要这么做,做这一步的作用和影响是什么。让自己对自己所做的事情有一个明确的了解。书中讲明白了sass是什么?compass是什么?在各种平台下如何安装,卸载,查询安装情况。不仅如此,还介绍了各种平台中推荐的各种开发工具的特点。除此之外,我感觉讲的比较透彻的一块就是工程目录结构和css输出格式的讲解,使我对sass的开发有了一个清晰的认识。最后,非常感谢作者的翻译,读完之后,有一种意犹未尽的感觉。
  •     乍一看《XXX指南》的书名觉得应该是专业术语云集的大部头,不过下载了样章再看,觉得还真是通俗易懂。于是,一口气看完了样章的60页。 从目录上来看,我觉得作者写的是很具有实用性的,从sass和compass的由来、安装、开发工具、项目实战、深入了解。这样一节节,由浅到深,可以说是按照sass和compass入门、进阶的思路,步步深入,步步提高,符合我们一般学习的流程。 在看到这本书名之前,实话说,我不知道sass和compass是用来编写css的。作为一个以编程为主的开发者来说,对css的编写一般都是直接创建.css文件,然后写内容,有些场景还是直接在页面文件中写css代码。看了第一章的自动转换RGBA颜色值、忘记浏览器前缀、嵌套规则等等,可以说是灵机一动,原来css也可以这样写。有时候,我们会使用一些服务端开发的模版语言去生成css文件,通过对sass的了解,原来css还有这样的编写方式。虽然和我们使用模版语言生成css文件的目的不尽相同,不过却又异曲同工之妙。原来css还是有很多学问的,还是有很多高手的!! 在了解的啥是sass和compass,作者开始介绍如何安装。ruby是安装的基础环境,如何安装ruby,这里我觉得无论是作者还是译者都是贴近我们生活的朋友,其中“如果使用的是Linux系统,那么可以假设你已经十分熟悉并知道该怎么做了 ;如果不是这样,建议买一台Mac!”这样的翻译让我不禁一笑。 后面开发工具的介绍,我觉得是很实用的,毕竟初次接触sass这类东东时,有个好的工具是提升我们学习兴趣和效率的必用手段。作者的图文并茂,我觉得对我这类初学者是很有益处的。而这里面的一句“CodeKit是一款只基于Mac OS X系统的软件(抱歉,使用Windows系统和Linux系统的小伙伴们)。”正好和上面呼应,看完这段,我都有加入os开发阵营的想法了。嗯,首先的购入一台mac!哈哈! 第二章是一个sass的工程示例,我觉得写的很是详细适合边看边做。 通过这个样章,我觉得这本书作者写的入时,译者翻译的入时,是一个sass和compass入门学习的好书,值得拥有!
  •     对于一个从事web开发的程序员来说,前端Css的使用和后端程序的开发都非常重要,尤其现在这样一个适合全栈工程师发展的年代,只有多技术才能存活。 这本书可以说是Ben Frain对样式应用的理解的一个总结,也是对CSS预处理器Sass和Compass的一个详述。 一、书开始的序,从改变思路到作者的介绍,再到辅助作者完成本书的人员的说明,都体现出了对于本书的严谨和编写本书的含义。 二、从书的章节的设计上,可以看出作者对于开发设计人员的循序渐进的说明过程,从Sass和Compass的安装初步到后面玩转颜色,再到精通响应式的设计应用,都非常详细的说明了Sass和Compass的使用方法和应用实例。 三、书的引言部分,通过介绍该书面向的群体和书中一些约定,也可以看出作者在编写本书时的严谨的态度。 四、书的每个章节的开始都有一个详细的概述,讲述该章节要学习的目的和内容,让读者更有针对性的去学习和阅读。章节中的代码也是讲解的很细致,通过Sass代码和生成的Css代码的对比,使读者更容易掌握本书的知识点。 五、书中对于关键词的解释也非常的通俗易懂,在叙述安装的部分时,使用了图文并照的方式,使读者在应用上更顺手。 六、书中对于需要特殊理解的地方,作者都使用了特殊的灯泡图标和括号来详细的讲述这些特殊的地方,对于读者理解上下文,也更加的容易。 七、全书围绕Sass和Compass的使用和精通,扩展到了Sass和Compass的周边应用,包括一些工具,特殊用法,一些特殊命令的使用,都做了横向的说明,使设计者收益颇丰。 最后,还是很感谢翻译的作者任凯光,这本书,之前从网上看到过英文版,介于自己的英文水平,有些地方还是没有看懂。读过这本书的翻译章节后,觉得之前不解的地方明白了很多。

精彩短评 (总计9条)

  •     一般般,写的太浅,这种类型的不建议买书,直接看文档就ok~
  •     书其实很薄, 而且感觉并不算特别实用~ 最大的问题是我的 sass 和 compass 出错了, 书里面的部分内容在生产环境下没有办法使用.
  •     特!别!!赞!!!
  •     原著值4星,翻译3星, 如果有点基础,1天内可以看完
  •     入门讲的蛮细,和实战那本差不多,不过有些地方可以互补
  •     不适合编程专
  •     非常适合入门的一本sass图书,推荐。
  •     不如直接去官网学习,而且编程环境也不是一成不变的。
  •     CSS预处理 入门上手的一本书吧
 

外国儿童文学,篆刻,百科,生物科学,科普,初中通用,育儿亲子,美容护肤PDF图书下载,。 零度图书网 

零度图书网 @ 2024