有Compass就不再枯燥

1、HTML5的样式重置
@mixin reset-html5{
article,siade,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
display:block;
}
}
现在，在你的SCSS文件里写入@include reset-html5调用这个混合器，就可以不必记住这个11个标记。

compass里可用的重置样式
reset-box-model 移除元素的内外边距和边框
reset-font 重置文字的字号和基线
reset-focus 移除浏览器提供的轮廓线（比如Safari给<input>元素加上的那一圈线）
reset-table和reset-table-cell 重置表格的边框和对齐方式
reset-quotaion 为<blockquotation>添加仅存在于样式表中的双引号

链接的配色： 
链接的不同状态是浏览器为链接的伪类赋予优先级的一种有趣方式，最佳实践是按照如下的顺序先后包含伪类选择器：
1 <a>
2 :visited
3 :focus
4 :hover
5 :active

根据浏览器特征设置链接颜色的CSS
a{color:#333;}
:visited{color:#555;}
:focus{color:#f00;}
:hover{color:#00f;}
:active{color:#f00;}

Compass提供了一个方便的混合器来处理这项工作：
a{ @include link-color(#333,#00f,#f00,#555,#f00);}
细心的你会注意到Compass例子中的这个颜色顺序和CSS例子中的并不吻合。因为Compass选择针对生产效率优化的顺序，而不是按浏览器的优先顺序。这个link-color的颜色参数
的顺序是你最可能在样式里使用的顺序。
link-color顺序                       浏览器顺序
<a>                                        <a>
:hover                                   :visited
:active                                   :focus
:visited                                  :hover
:focus                                    :active

可以只传递前两个参数来定义默认的颜色和:hover状态的颜色：
a{ @include link-color(#333,#00f);}

2.通过hover-link设置的悬停样式
假设你希望用下面的css实现仅当用户悬停在链接上时才显示下划线：
a{text-decoration:none;}
a:hover{text-decoration:underline;}

用Compass仅仅使用hover-link混合器即可：
a{ @include hover-lick }

 

3通过unstyle-link设置隐性的链接
设想你希望在一段话里隐藏一个链接，移除所有会提示用户这是一个链接的样式，Compass通过unstyle-link混合器：
p.secret a { @include unstyle-link }