你的位置:首页 > 网页设计

[网页设计]compass模块


 

Compass核心模块
Reset :重置CSS模块

 @import "compass/reset"

Layout :页面布局的控制能力

@import "compass/layout"

只有这两个模块是需要明确 指定引入的
@import "compass"默认包含了其他五大模块却不包含resrt,layout

其他四个功能模块和Browser support模块
CSS3:跨浏览器的CSS3能力
Helpers:内含一系列的函数,跟SASS的函数列表很像,比较少用,功能确实丰富强大
Typography:修饰我们的文本样式,垂直韵律
Utilities:没有办法放到其他模块的内容都可以放到这个模块里。辅助工具类模块,helpers都是函数,utilities多是mixin
Browser:配置compass默认支持哪些浏览器。对于特定浏览器默认支持到哪个版本。一个修改将影响六个模块的输出。不同的浏览器做不同的适配。

 

 

Compass核心模块概述&Reset模块

compass-normalize插件命令安装:

gem install compass-normalize

引入compass-normalize插件
config.rb文件里:

require 'compass-normalize'

扩展:
config.rb文件里的import-once解决了多次@import同一个文件,compass也只会插入一次被引入问件。但使用了import-once万一遇到真的遇到一个文件必须被引入两次的情况,可以通过被引入文件的文件名的后面加一个感叹号!方式来告知compass这里需要重复引入。@import "compass/reset!"

在SCSS文件中引用normalize

@import "normalize";

Normalize核心模块:
base:用来统一HTML和body标签的字体,文字大小调整、边距等等。
html5:统一html5中新增的元素的展现形式
links:统一a便签的样式修饰,去掉hover和active时候的边线。
typography:统一b、strong、sub、sup等段落文本的样式修饰。
embeds:统一img,svg等标签的样式修饰(比如统一img标签的border为0 )
groups:统一figure、pre、code等标签的样式
forms:统一form相关的button、input、等标签的样式
tables:统一table相关的table、td、th等标签的样式

引入(通过子路径的方式):

@import "normalize-version"//--在引入子类之前需要引入normalize-version@import "normalize/base"

 @import "compass/reset/untlities"; .....引入这些mixin的集合

 @import "compass/reset"; 其实就是引入了compass/reset/untlities,然后调用了其中的一个global-reset();的mixin集合。

@import "compass/reset/untlities";include global-reset();

reset Utilities核心mixin
http://compass-style.org/reference/compass/reset/utilities/
nested-reset:只用于重置我们页面上的某个选择器下的所有元素。
例如重置reset-sec的所有元素:

.reset-sec{  @include nested-reset;}

 

 

 

 

Layout模块(使用率最低的模块)
layout模块下面又细分3个核心mixin模块,可以分别引入。

1 @import "compass/layout";2 @import "compass/layout/grid-background";3 @import "compass/layout/sticky-footer";4 @import "compass/layout/stretching";

stretching模块,按父元素尺寸拉伸元素,示例:

1 .stretch-full {2   @include stretch();3 }4 .stretch-full2 {5   @include stretch(5px,0px,5px,5px); //非0值单位px不可省6 }7 .stretch-full3 {8   @include stretch($offset-top:5px,$offset-right:0px,$offset-bottom:5px,$offset-left:5px); //参数顺序可变,非0值单位px不可省9 }

经过sass转换后代码:

 1 .stretch-full { 2   position: absolute; 3   top: 0; 4   bottom: 0; 5   left: 0; 6   right: 0; 7 } 8 .stretch-full2 { 9   position: absolute;10   top: 5px;11   bottom: 0;12   left: 5px; right: 5px;13 }14 .stretch-full3 {15   position: absolute; 16   top: 5px;17   bottom: 5px;18   left: 5px; right: 0px;19 }

sticky-footer模块,提供footer总在页面最底部的解决方案,需要固定的结构:

1 <body>2   <div id="root">3     <div id="root_footer"></div>4   </div>5   <div id="footer">6     Footer content goes here.7   </div>8 </body>

@include sticky-footer(54px) //参数为footer高度@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer") // 自定义选择器

 

 

 

 

CSS3模块&Browser Support模块(主动使用率较高的模块)
在用CSS3模块的时候要调整Browser Support模块的配置,即使不主动调整CSS3也引入了Browser Support模块。CSS3模块主要用于跨浏览的CSS3的能力。
例:

1 @import "compass/css3";2 .webdome-sec{3   @include box-shadow(1px 1px 3px 2px #cfcecf);4 }

生成的代码:

1 .webdemo-sec {2   -moz-box-shadow: 1px 1px 3px 2px #cfcedf;3   -webkit-box-shadow: 1px 1px 3px 2px #cfcedf;4   box-shadow: 1px 1px 3px 2px #cfcedf;5 }

假如不需要自动生成Firefox的适配代码,这时就需要用Browser Support模块。来配置compass默认支持哪些浏览器。对于特定浏览器支持到哪个版本。Browser Support模块一但修改将影响其余六个模块的输出。
引入support:

@import "compass/support";

引入了CSS3模块,相当于间接引入了support模块。
查看当前支持的浏览器版本:

控制台命令:

1 compass interactive //进入一个用于测试Compass中SassScript的控制台2 browsers() //查看支持的浏览器3 browser-versions(chrome) //查看支持的chrome版本

在sass文件中输入 @debug browsers() 控制台也会打印出支持的浏览器。
设置compass支持的浏览器:

@import "compass/css3";$supported-browsers: chrome firefox;

也可以写成: $supported-browsers: chrome,firefox ;  浏览器队列用 空格或者逗号分隔均可。

设置compass支持的浏览器的最低版本(compass默认支持到ie5.5):

$browser-minimum-versions:("ie":"8","":"")

不设置的话 默认支持 browsers-versions 返回的的版本。
Animation:CSS3动画相关的特性。
Appearance:CSS3的appearance属性,也是CSS3的新规范中新定义的新属性。(还没有一个主流的浏览器支持这个属性)
Background ClipBackground OriginBackground Size:CSS3新增的background相关的属性,用来规定背景的绘制区域、背景图像的定位原点、背景图像的尺寸等。
Border Radius:边框圆角属性
BoxBox Shadow
Box Sizing:用来修改盒模型的宽高的度量方式。
CSS Regions:控制内容布局的新方式
CSS3 Pie:尽可能提高ie浏览器呈现许多CSS3功能
Columns:CSS3的多列布局属性
Filter:主要用于在图片上实现一些特效
Flexbox:(移动端web开发用的比较多)
Font Face:不依赖于用户计算机上安装好的字体,指定下载好的某一种字体
Hyphenation:如何断字换行
Images:CSS3新增了这种生成渐变图形的方式,images用于需要使用这两种方式充当图片的场景。
Inline Block:实现跨浏览器的display:inline-block;能力
Opacity:透明属性,为了兼容低版本的IE
Selection:使用CSS3的selection伪元素定义被选中文本的颜色和背景色
Shared Utilities:想贡献CSS3模块的相关compass插件会用到。工具类模块
Text Shadow:文字阴影属性
TransformTransition:变幻动画属性
User Interface:限制某一区域是否允许鼠标拖拽选择,input元素在无填写状态下提示语的样式

 

 

 

Typography模块
分为四个模块:
Links:链接修饰模块正常态下去掉下划线,在hover的情况下才显示这个下划线hover-link();

1 a{2   @include hover-link();3 }

编译之后:

1 a {2   text-decoration: none;3 }4 a:hover, a:focus {5   text-decoration: underline;6 }

修改不同状态下超链接的颜色link-colors
抹平超链接样式,和他跟父容器的文本无异unstyled Link

Lists:列表修饰模块

Text:文本修饰模块

Vertical Rhythm:垂直韵律修饰模块

@import "compass/typography/vertical_rhythm";