Sass与Compass实战

没法设计出令人惊艳的Web页面时,就使用垂直韵律让它中规中矩吧!

在讲述了Sass的基本语法后,本书的着重点在于使用Compass实现网格布局、文本排版、CSS3特性、精灵、config.rb文件配置、样式表调优、以及扩展分发。

compass/typography目录下的_vertical_rhythm.scss管理垂直韵律(行与行之间内容的留白),我解决了页面文本排版乱杂无章的问题。

Compass方便了大家在CSS中引用图片资源、合成CSS sprites以及data URI,但我个人更倾向于使用SVG sprites 代替CSS sprites(推荐Font Awesome的服务)。

文摘

我们需要从人的角度考虑问题,人们怎样编写程序或者怎样使用机器上的应用程序。我们是主人,它们是仆人。

—松本行弘

类名具有语义化含义,混合器则是作为一种展示性描述。判断一组属性是否应该组合成一个混合器,一条经验法则就是——能否为这些属性取一个描述性的名字。

继承应建立在语义化的关系上,它遵从CSS层叠规则,与混合器相比,继承生成的CSS代码相对更少。值得注意的是:尽量不要使用后代选择器去继承CSS规则。

CSS网格布局的核心由容器构成。

术语名

定义

是否涉及HTML标签

容器

构成一个网格布局的HTML元素

内容度量的垂直单位

网格布局中列与列之间的统一留白

源码控制的最佳实践表明:非手工编辑的生成文件不应该出现在源码控制中,如:编译生成的CSS文件。