compass常用模块总结

亦凉 2022-06-06 08:50 261阅读 0赞

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;