compass常用模块总结

1：首先要知道compass中内置的是有五大模块：reset--css3--layout--typography--utilities，当然自己也可以写模块或者添加第三方模块

（1）reset模块：

@import "compass/reset";   //reset模块，重置浏览器的默认样式

有时不需要进行全局的样式重置，可以单独重置某一块

reset-html5                  HTML5样式重置

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

用法：

@import "compass/reset/utilities";

@include reset-html5;        

（2）css3模块   一共有19种样式，先说三种：     

1:首先是圆角：     @import "compass/css3";

                          .api{

                                @include border-radius(5px)

                       }   

    备注：其中（5px）  是参数可以自己改    

          若只需要更改左上角应该写成      @include border-corner-radius(top,left,5px) ;                                    2:透明：         

                  @import "compass/css3";

                          .api{

                                @include opacity(0.5)

                       }   

3：行内区块：     

                  @import "compass/css3";

                          .api{

                                @include inline-block；

                       }   

（3）layout模块：

1：footer总是出现在页面最底部：

                   @import "compass/css3";

                          .api{

                                @include sticky-footer（54px）；

                       }  

2：子元素沾满父元素空间：

                       @import "compass/css3";

                          .api{

                                @include stretch；

                       }  

（4）typography模块：主要是提供板式功能

1：写A标签的各种链接样式：

                   @import "compass/typography";

                          a{

                                @include link-colors(#cc,#cc,#cc,#cc,#cc,)；

                       }  

    备注：其中（）内的参数分别对应：link-colors($normal, $hover, $active, $visited, $focus)

（5）utilities

提供某些不属于其他模块的功能，如reset中引入的混合器就包含在utilities中@import "compass/utilities/";

1：清除浮动@include clearfix;

2：表格@include table-scaffolding;