标签：
概要：这一章将深挖Compass的工具箱，看看Compass的混合器如何帮助你省去编写重复样式表的辛苦工作。
本章内容：
● 使用Compass重置浏览器默认样式表
● 改进样式表排版的Compass辅助器
● 使用Compass创建粘滞的页脚、多样化的表格以及浮动
1. 一张更好的白纸源自有针对性的样式重置
1.1 全局样式重置
当你构建一个传统的Web应用程序时，如果需要支持很多浏览器，甚至包括低版本的Internet Explorer，那么一个全局的样式重置是非常给力的。Compass体统了一个全局的样式重置，并命名为global-reset。代码如下：
@mixin global-reset {
html , body , div , span , applet , object , iframe ,
h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre ,
a , abbr , acronym , address , big , cite , code ,
del , dfn , em , img , ins , kbd , q , s , samp ,
small , strike , strong , sub , sup , tt , var ,
b , u , i , center ,
dl , dt , dd , ol , ul , li ,
fieldset , form , label , legend ,
table , caption , tbody , tfoot , thead , tr , th , td ,
article , aside , canvas , details , embed ,
figure , figcaption , footer , header , hgroup ,
menu , nav , output , ruby , section , summary ,
time , mark , audio , video {
@include reset-box-model;
@include reset-font; }
body {
@include reset-body ; }
ol , ul {
@include reset-table ; }
table {
@include reset-table-cell ; }
caption , th , td {
@include reset-quotation ; }
a img {
@include reset-image-anchor-border ; }
@include reset-html5 ; }
注意，global-reset只是一个在内部应用了若干样式重置混合器的包装。这些
（通过Sass的@include引入的）混合器不仅致力于解决浏览器在盒模型、排版、列表样式、表格样式等诸多方面的不一致问题，还为新的HTML5元素添加了默认样式。
1.2 通过有针对性的样式重置进行更多控制
使用@import "conpass/reset/utilities"而不是全局样式重置可以有针对性的对样式进行重置。让我们看几个上一节中出现的组成全局样式的混合器：
(1) 高瞻远瞩的HTML5样式重置
Compass的reset-html5混合器样式重置代码：
@mixin reset-html5{
article , aside , details , figcaption , figure ,
footer , header , hgroup , menu , nav , section , summary {
display : block ;
}
}
现在，在你的SCSS文件中写入@include reset-html5调用这个混合器，你就不必记住这11个标记了。
(2) Compass文档中更多的样式重置
下表是Compass里可用更多样式重置，更多的推荐去查阅Compass文档中样式重置的完整列表。
| 样式重置混合器 | 目的 |
| reset-box-model | 移除元素的内外边距和边框 |
| reset-font | 重置文字的字号和基线 |
| reset-focus | 移除浏览器提供的轮廓线（比如Safari给<input>元素加上的那一圈线） |
| reset-table和reset-table-cell | 重置表格的边框和对齐方式 |
| reset-quotation | 为<blockquotes>添加仅存在于样式表中的双引号 |
2. 更快更直观的排版工具
通过@import "compass / typography"使用Compass的排版模块。
2.1 起锚远航 ： 链接辅助工具
Compass可以轻松地定义基础的文本和链接的颜色。
(1) 轻轻松松为链接配色
根据浏览器特征设置链接颜色的CSS代码看起来像这样：
a { color : #333 }
a : visited { color : #555 }
a : focus { color : #f00 }
a : hover { color : #00f }
a : active { color : #f00 }
你可以死记硬背地记住这个顺序，然后写伪类来改变链接颜色，但是Compass提供了一个方便的混合器来处理这项工作：
a { @include link-color(#333 , #00f , #555 , #f00 ) ; }
上面代码中的颜色顺序与CSS例子中的顺序并不吻合，因为Compass选择了针对生产效率优化的顺序，而不是按照浏览器的优先级顺序。这个link-colors的颜色参数顺序是你最可能在样式表里面使用的顺序。下表展示了link-colors完整的参数顺序和它们被应用到不同链接状态的顺序。
| link-colors顺序 | 浏览器顺序 |
| <a> | <a> |
| : hover | : visited |
| : active | : focus |
| : visited | : hover |
| : focus | : active |
(2) 通过hover-link设置悬停样式
有些可用性专家建议链接下面始终要有下划线，以此提示用户这个东西可以点击。但在一些行高有限的情况下，增加下划线反而会降低阅读体验。假设你希望用下面的CSS实现仅当用户悬停在链接上时才显示下划线：
a { text-decoration : none }
a : hover { text-decoration : underline }
Compass让链接只在: hover 时加下划线变得简单了，仅仅使用hover-link混合器即可：
a { @include hover-link }
(3) 通过unstyled-link 设置隐性的链接
假设你希望在一段话里隐藏一个链接，移除所有会提示用户这是一个链接样式。你可以这么写CSS：
p .secret a ,
p .secret a:hover ,
p .secret a:focus {
color : inherit ;
cursor : inherit ;
text-decoration : inherit }
这个建议不错，但是Compass通过unstyled-link混合器把这个工作变得更简单了：
p .secret a { @include unstyled-link }
2.2 创建各种各样的列表
(1) 用pretty-bullets装点列表
基于图片的项目符号可以为你的列表元素增加冲击力。但是IE从5.5开始支持的list-style-image属性有很多问题。比如在低于IE8的版本中，浮动列表元素不会显示列表项的图片。为了找到跨浏览器解决方案，设计师们经常使用背景图片来显示列表的项目符号：
ul .features li {
background : url( / images / pretty-bullet.png ) 5px 5px no-repeat;
list-style-type : none;
padding-left : 20px;
}
一段小小的代码足以让你头疼。首先，你不得不根据预期的内边距和图片宽度计算布局。其次你必须知道你的图片尺寸。考虑到这些问题，Compass提供了pretty-bullets混合器，有了它，通过背景图片显示列表的项目符号就变得容易了：
ul .features{
@include pretty-bullets( ‘ pretty-bullet.png ‘ )
}
(2)通过no-bullets和no-bullets去掉项目符号
Compass同样提供了一些快速移除<li>元素列表样式的方式。
li .no-bullet { @include no-bullet }
如果你希望去掉整个列表的项目符号，也可以使用复数形式的no-bullets混合器：
ul .no-bullet { @include no-bullets }
(3) 轻松横向排布
浏览器默认的列表样式是竖直排布列表项，并且有内外边距。这本是很好的显示方式，设计师们还常常喜欢横向排布包含导航链接的列表：
ul .nav {
border : 0;
margin : 0;
overflow : hidden;
padding : 0;
}
ul .nav li {
display : inline;
float : left; /* 横向排布菜单 */
margin-left : 0px;
padding-left : 4px;
padding-right : 4px;
}
有了Compass，仅仅通过引入horizontal-list混合器就可以完成这一工作。
ul .nav { @include horizontal-list }
(4) 用inline-list处理内联列表
看看下面这段代码：
<ul class="giant-words">
<li> Fee </li>
<li> Fi </li>
<li> Fo </li>
<li> Fum </li>
</ul>
<p> are some words of giants with acute senses of smell for Englishmen. </p>
在这个例子中，我们把列表设置成内联的样式，并用逗号隔开，这样可能读起来更合适。Compass可以用一行代码就做到：
ul .words {@include delimited-list }
通过组合 ：after和：last-child，Compass产生的CSS可以让列表变成内联的。Compass还可以让你定制分隔符，让这个列表更霸气：
ul .words { @include delimited-list( "!" ) }
2.3 用辅助工具征服文字
(1) 用省略号代表截断内容
将超过容器宽度的文字变成省略号的CSS实现方式是：
td .dot-dot-dot {
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis ;
}
而Compass实现方式是：
td .dot-dot-dot {
@include ellipsis;
}
使用ellipsis混合器额外的好处是可以生成带有供应商前缀的属性名。
值得注意的是，为了让text-overflow生效，必须同时使用white-space：nowrap。
(2) 用nowrap防止文本折行
nowrap混合器简单好用，可以产生如下CSS代码：
td { white-space : nowrap }
我们只需要简单的写成：
td { @include nowrap }
(3) 用replace-text将图片转换为文字
尽管有诸如@font-face、Cufón等其他新技术的不断发展，设计师们在必要时还是采用传统的方法来改进Web排版——把文字处理成图片显示出来。常常在头条和其他核心的页面元素上，图片可以传递更复杂的设计元素，有时你无法用标准的字体来处理。在这些情形下，许多设计师都急于在该文本原本的位置放一张<img>了事。对于可访问性（和SEO）而言，更好的建议是用CSS来处理。实现代码：
h1 .coffee {
text-indent : -119988px;
overflow : hidden;
text-align : left;
background-image : url ( ‘ /images/coffee-header.png ‘ );
background-repeat : no-repeat;
background-position : 50% 50%;
}
Compass通过replace-text辅助器把这件事情变得更简单了：
h1.coffee { @include replace-text( "coffee-header.png" ) }
3. 布局辅助工具
除了网格，布局模式估计是样式表中最个性化的部分。Compass提供了一对辅助器来应对不同的布局场景：粘滞的页脚和可伸展的元素。在尝试下面的例子之前请先通过@import "compass/layout";导入布局模块。
3.1 粘滞的页脚
想象一个场景，你需要页脚始终停靠在页面的最下方。你第一时间想到的可能是position:fixed。不幸的是，如果你需要支持IE6的话，那么CSS不会直接生效。下面我们介绍Ryan Fait的实现方式，以下面的代码为例：
<body>
<div id="content">
页面内容....
<div id="bump"></div>
</div>
<div id="footer">
停靠在页脚的内容
</div>
</body>
可以用下面的CSS粘滞页脚：
html , body {
height : 100%;
}
#content {
clear : both;
min-height : 100%;
height : auto !important;
height : 100%;
margin-bottom : -40px;
}
#content #bump {
height : 40px;
}
#footer {
clear : both;
position : relative;
height : 40px;
}
而Compass的sticky-footer混合器可以让代码更简单：
@include sticky-footer ( 40px , "#content" , "#footer" , "#sticky-footer" );
3.2 可伸展元素
流布局被认为是Web界面的核心优势之一，Web设计师也经常理所当然地使用它。而那些有桌面应用开发背景的人，却常常忽视.NET WinForms、JavaSwing、Flash等框架中常见的绝对定位方式。当然，Web通过positin: absolute支持了这种布局方式：
a .login {
position : absolute;
top : 5px; right : 5px; bottom : 5px; left : 5px;
}
Compass的stretch混合器提供了一个设置这些样式的快捷方式：
a .login { @include stretch ( 5px , 5px , 5px , 5px ) }
产出的代码和之前相同。stretch混合器有4个参数：$offset-top、$offset-right、
$offset-bottom 和$offset-left 。Compass 还提供了只设置一个轴向可拉伸的混合器
stretch-x和stretch-y，它们分别只带有$offset-left和$offset-right、$offset-top
和$offset-bottom两个参数。
标签：
原文地址：http://www.cnblogs.com/koto/p/5550625.html
