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模块，可以分别引入。

 @import "compass/layout";

 @import "compass/layout/grid-background";

 @import "compass/layout/sticky-footer";

 @import "compass/layout/stretching";

stretching模块，按父元素尺寸拉伸元素，示例：

 .stretch-full {

     @include stretch();

 }

 .stretch-full2 {

     @include stretch(5px,0px,5px,5px); //非0值单位px不可省

 }

 .stretch-full3 {

     @include stretch($offset-top:5px,$offset-right:0px,$offset-bottom:5px,$offset-left:5px); //参数顺序可变,非0值单位px不可省

 }

经过sass转换后代码：

 .stretch-full {

     position: absolute;

     top:;

     bottom:;

     left:;

     right:;

 }

 .stretch-full2 {

     position: absolute;

     top: 5px;

     bottom:;

     left: 5px; right: 5px;

 }

 .stretch-full3 {

     position: absolute;

     top: 5px;

     bottom: 5px;

     left: 5px; right: 0px;

 }

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

 <body>

     <div id="root">

         <div id="root_footer"></div>

     </div>

     <div id="footer">

         Footer content goes here.

     </div>

 </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的能力。
例：

 @import "compass/css3";

 .webdome-sec{

     @include box-shadow(1px 1px 3px 2px #cfcecf);

 }

生成的代码：

 .webdemo-sec {

     -moz-box-shadow: 1px 1px 3px 2px #cfcedf;

     -webkit-box-shadow: 1px 1px 3px 2px #cfcedf;

     box-shadow: 1px 1px 3px 2px #cfcedf;

 }

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

@import "compass/support";

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

控制台命令：

 compass interactive //进入一个用于测试Compass中SassScript的控制台

 browsers() //查看支持的浏览器

 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 Clip、Background Origin、Background Size：CSS3新增的background相关的属性，用来规定背景的绘制区域、背景图像的定位原点、背景图像的尺寸等。
Border Radius：边框圆角属性
Box、Box 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：文字阴影属性
Transform、Transition：变幻动画属性
User Interface：限制某一区域是否允许鼠标拖拽选择，input元素在无填写状态下提示语的样式

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

 a{

     @include hover-link();

 }

编译之后：

 a {

     text-decoration: none;

 }

 a:hover, a:focus {

     text-decoration: underline;

 }

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

Lists：列表修饰模块

Text：文本修饰模块

Vertical Rhythm：垂直韵律修饰模块

@import "compass/typography/vertical_rhythm";

compass模块的更多相关文章

  1. compass模块----Utilities----Sprites精灵图合图

    css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是 ...

  2. compass模块----Utilities

    引入Utilities: @import "compass/utilities"; 分别引入: @import "compass/utilities/color" ...

  3. compass模块----Helpers

    Color Stops:在使用CSS3渐变属性生成图片的时候,有时候为了打造更丰富的渐变效果除了声明渐变线上的起始点和终止点的色值,还有声明一些中间点的色值,这些点我们就称之为Color Stops. ...

  4. Compass的误解与新发现

    最后个人感觉 Compass是 css世界的.NET 很久以前看到 Compass 误以为是css编译器,因为总是在看到如何安装Scss的文章里面看到的 知道最近不小心进入 Compass官网溜达,才 ...

  5. 初始化rails上的compass项目

    compass以外还有一个很实用的scss模块, _media-queries.scss 通过终端下载 curl -O https://raw.github.com/paranoida/sass-me ...

  6. Compass用法

    一.什么是Compass? Compass是Sass的工具库,Compass在SASS的基础上,封装了一系列有用的模块去补充Sass的功能,类似Javascript和jQuery 二.安装 之前已经写 ...

  7. sass与compass实战(读书笔记)

    // compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compil ...

  8. Sass与Compress实战：第一章

    1.消除冗余代码的方式: ▶通过变量来复用属性值 例如,一段冗余的CSS代码: h1#brand { color : #1875e7 } #sidebar { background-color : # ...

  9. 还在手动给css加前缀？no！几种自动处理css前缀的方法简介

    原文首发于个人博客:还在手动给css加前缀?no!几种自动处理css前缀的方法简介 我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容.移动端还好,基本只要 ...

随机推荐

  1. 网站项目后台的目录命名为admin后，网页莫名其妙的变样了

    这是我的第一篇博客文章,与其说是分享经验,倒不如说是求助 最近因为要完成一个课程设计,在拿一个现成的项目过来改,要用到select下拉菜单,可是发觉怎么我的这个下拉菜单怎么变样了 刚开始它是这样的 感 ...

  2. lvm拉伸逻辑卷分区小总结

    文件系统                                      容量     已用      可用     已用% 挂载点 /dev/mapper/vg_znl-lv_root   ...

  3. [c#]asp.net开发微信公众平台(8)微信9大高级接口，自定义菜单

    前7篇把最基础的消息接收和回复全做完了,  也把高级接口的入口和分拆处理写好了空方法,  此篇接着介绍微信的9大高级接口, 并着重讲解其中的自定义菜单. 微信9大接口为: 1.语音识别接口 2.客服接 ...

  4. Mac os 上可执行jar包转app方法

    此操作可分如下几步: 1:生成jarbao: jar cf myName.jar *.class 2:生成打包所需配置文件:build.xml: <project name="MyPr ...

  5. C#生成Code39(extend)条形码【非条形码字体】

    Code39是条形码的一种.由于编制简单.能够对任意长度的数据进行编码.支持设备广泛等特性而被广泛采用. 能够对任意长度的数据进行编码.其局限在于印刷品的长度和条码阅读器的识别范围. 支持设备广泛.目 ...

  6. C#time 闹钟

    private void timer2_Tick(object sender, EventArgs e) { lbltime.Text = DateTime.Now.ToString(); & ...

  7. uva 10167 - Birthday Cake

    题解:由于解太多,随机抓 A.B, 只要有符合就行了: (首先,Ax+By=0必须表示直线,即A.B不能同时为0:另外,要注意到直线不能过输入中的2N个点:检测点在直线的哪一侧,只需要简单的线性规划的 ...

  8. 类和对象：面向对象编程 - 零基础入门学习Python037

    类和对象:面向对象编程 让编程改变世界 Change the world by program 经过上节课的热身,相信大家对类和对象已经有了初步的认识,但似乎还是懵懵懂懂:好像面向对象编程很厉害,但不 ...

  9. 2016ICPC China-finals 题解

    A:ans=n/3,因为8=1(mod7) B: C: D:二分+贪心,二分答案,即个数,check(mid)时贪心看能不能放成mid个; E:贪心,列出不等关系,然后写个高精度分数类; F:二分+h ...

  10. 布局共享（列如所有activity拥有相同的布局部分，比如actionbar，在BaseActivity中写入布局）

    有时候界面上会用到统一的布局,比如toolbar,你可能会想到在用到的地方都去加上toobar这样对于程序的开发与维护来说都显得特别麻烦,我们可以将他写在父类中. 首先创建一个BaseActivity ...