Compass学习指南

来源：互联网发布：解压缩软件美化版编辑：程序博客网时间：2024/04/27 17:00

Compass是Sass的一个工具库，他们之间的关系就好像JavaScript和jQuery一样。

学习Compass之前，你最好有一定的Sass基础。就好像你不会JavaScript一样可以使用jQuery一样，懂得Sass会让你更好的理解Compass。

1. 安装和使用

1.1 安装

跟Sass一样，Compass是基于Ruby的。所以首先，你得安装Ruby。

这里我们假定你已经安装了Ruby，接着，在命令行输入：

sudo gem install compass

compass就安装好了。

1.2 创建项目

创建项目很简单，假定你要在当前目录创建一个项目为Test：

compass create Test

上面这个命令会在当前目录下创建一个新目录Test，里面会有一个config.rb，这是一个配置文件，还有两个子目录：sass和stylesheets。你在sass目录中编写sass文件，生成的css文件会出现在stylesheets中。

1.3 编译

编译命令非常简单：

compass compile

如果你想实时编译，可以使用：

compass watch

1.4 Compass的模块机制

Compass是Sass的库。它封装了一系列Sass函数、mixin共开发者使用。这些Sass函数和mixin，Compass使用模块来将他们分类。

Compass中一共有七个模块：

Reset
Layout
CSS3
Browser Support
Typography
Utilities
Helpers

需要导入某个模块，只需要使用@import指令就可以了。比如导入reset模块：

@import "compass/reset";

本篇文章也是围绕这七个模块来介绍的。

2. 模块

值得一提的是，大多数情况下，你只要使用：

@import "compass";

就行了，这样会默认导入所有的模块，除了 Reset和Layout这两个模块。这两个模块需要手动导入：

@import "compass/reset";@import "compass/layout";

通常我们需要哪个模块才会导入哪个模块。

打开sass目录下的screen.scss。

2.1 Reset模块

Reset模块用于重置浏览器的默认样式。Compass中的reset模块使用的是meyer reset重置，它会把所有的浏览器默认样式归零。

@import "compass/reset";

编译得到的就是reset.css;

如果你更喜欢normalize的重置思想，可以看看Compass中导入Normalize。

2.2 Layout模块

Layout模块使用率较低，这里只介绍两个子模块。

2.2.1 Stretching子模块

Layout模块中的Stretching子模块，主要用来拉伸元素的：

@import "compass/layout/stretching";

Stretching子模块中有一个名为stretch的mixin：

.box{    @include stretch();}

生成的CSS为：

.box {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;}

你也可以单独拉伸水平方向或垂直方向，分别对应stretch-x和stretch-y。

Sticky Footer子模块用来生成一个总是在页面最底部的页脚，即使页面本身长度不到浏览器窗口的高。

使用这个子模块需要配合特定的HTML样式：

<body>  <div id="root">    <div id="root_footer"></div>  </div>  <div id="footer">    Footer content goes here.  </div></body>

然后在scss文件中：

@include sticky-footer(54px);

sticky-footer可以传入一个参数用于指定footer的高。

你也可以自己定义HTML的选择器：

@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")

这个模块用的很少。

2.3 CSS3模块

CSS3模块用的最多。它主要解决了CSS3新增属性在不同浏览器中的实现，比如，自动添加浏览器厂商前缀，适配IE。

CSS3模块很多，这里只说background-size，border-radius，opacity，inline-block。

2.3.1 background-size

@import "compass/css3";.box{    @include background-size(cover);}

生成CSS：

.box {  -moz-background-size: cover;  -o-background-size: cover;  -webkit-background-size: cover;  background-size: cover;}

2.3.2 border-radius

@import "compass/css3";.box{    @include border-radius(5px);}

生成CSS：

.box {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;}

2.3.3 opacity

@import "compass/css3";.box{    @include opacity(0.5);}

生成CSS：

.box {  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  opacity: 0.5;}

2.3.4 inline-block

@import "compass/css3";.box{    @include inline-block;}

生成CSS：

.box {  display: inline-block;  vertical-align: middle;  *vertical-align: auto;  *zoom: 1;  *display: inline;}

2.4 Browser Support模块

这个模块是用来指定支持的浏览器及版本的。所以这个模块设定的结果将影响其他模块。比如修改支持的浏览器：

$supported-browsers: chrome;@import "compass/css3";.box{    @include border-radius(4px, 4px);}

这样生成的CSS中厂商前缀将只有chrome：

.box {  -webkit-border-radius: 4px 4px;  border-radius: 4px / 4px;}

支持多个浏览器可以这样：

$supported-browsers: chrome firefox;

对于浏览器版本：

$browser-minimum-versions: ("chrome": null, "firefox": null, "ie": null, "safari": null, "opera": null)

比如：

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

2.5 Typography模块

Typography模块提供字体排版样式。

分为Links，Lists，Text，Vertical Rhythm四个子模块。

这里只介绍前三个。

2.5.1 Links

主要有三个mixin：hover-link，link-colors，unstyled-link。

hover-link，用于更改不同状态下超链接是否有下划线：

@import "compass";a{    @include hover-link();}

生成CSS：

a {  text-decoration: none;}a:hover, a:focus {  text-decoration: underline;}

link-colors，主要用于更改不同状态下超链接的颜色：

link-colors($normal, $hover, $active, $visited, $focus)

例子：

@import "compass";a{    @include link-colors(red,blue,gray,purple,green);}

生成CSS：

a {  color: red;}a:visited {  color: purple;}a:focus {  color: green;}a:hover {  color: blue;}a:active {  color: gray;}

unstyled-link，主要用于抹除超链接默认样式：

@import "compass";a{    @include unstyled-link();}

生成CSS：

a {  color: inherit;  text-decoration: inherit;  cursor: inherit;}a:active, a:focus {  outline: none;}

2.5.2 Lists

这里介绍no-bullets，inline-block-list。

no-bullets：

@import "compass";ul{    @include no-bullets();}

生成CSS：

ul {  list-style: none;}ul li {  list-style-image: none;  list-style-type: none;  margin-left: 0;}

inline-block-list：

@import "compass";ul{    @include inline-block-list();}

生成CSS：

ul {  margin: 0;  padding: 0;  border: 0;  overflow: hidden;  *zoom: 1;}ul li {  list-style-image: none;  list-style-type: none;  margin-left: 0;  display: inline-block;  vertical-align: middle;  *vertical-align: auto;  *zoom: 1;  *display: inline;  white-space: nowrap;}

2.5.1 Text

Text只介绍一个ellipsis：

@import "compass";p{    @include ellipsis();}

生成CSS：

p {  white-space: nowrap;  overflow: hidden;  -ms-text-overflow: ellipsis;  -o-text-overflow: ellipsis;  text-overflow: ellipsis;}

2.6 Utilities模块

utilities模块和Helpers模块都用来提供一些不属于其他模块的功能。不同的是，Utilities模块提供的主要是mixin，而Helpers提供的是函数。

对于表格，Utilities提供了outer-table-borders($width, $color)，inner-table-borders($width, $color)，table-scaffolding。

使用的比较多的是table-scaffolding：

@import "compass";table{    @include table-scaffolding;}

生成CSS：

table th {  text-align: center;  font-weight: bold;}table td,table th {  padding: 2px;}table td.numeric,table th.numeric {  text-align: right;}

还比如清除浮动：

@import "compass";.clearfix{    @include clearfix;}

生成CSS：

.clearfix {  overflow: hidden;  *zoom: 1;}

但这种清除浮动有个弊端：无法让子元素通过margin负值悬挂在容器之外的效果，因为一旦超出容器就被hidden了。
Compass考虑了这种特殊的需求，提供了一个pie-clearfix：

@import "compass";.clearfix{    @include pie-clearfix;}

生成CSS：

.clearfix {  *zoom: 1;}.clearfix:after {  content: "";  display: table;  clear: both;}

但display: table;可能低版本的IE不支持，Compass提供了另一个：

@import "compass";.clearfix{    @include legacy-pie-clearfix;}

生成CSS：

.clearfix {  *zoom: 1;}.clearfix:after {  content: "\0020";  display: block;  height: 0;  clear: both;  overflow: hidden;  visibility: hidden;}

对于浮动：

@import "compass";.box1{    @include float(left);}

生成CSS：

.box1 {  float: left;}

float()这个mixin还会根据$browser-minimum-versions判断要不要兼容IE6（IE6在float元素显示时有bug）。

2.6.1 精灵合图

这里把精灵合图挑出来讲。Compass让我们可以更简单的使用精灵图。

我们在images目录下新建一个logo目录，用来存放精灵图（只能是png格式的）：

@import "logo/*.png";@include all-logo-sprites();

然后Compass会自动生成一张合图，再根据每张图片的名字生成对应的class，自动计算每张图的位置。

如果不想使用自动生成的类名，你也可以这样：

.error{    @include logo-sprite("sprite1");//传入图片名}

这样.error类就可以使用sprite1这张精灵图了。

有时候我们要为一个button设定不同状态下的背景，比如active和focus状态下使用不同的图片，那么我们只需要给精灵图这样命名：

sprite1_active.pngsprite1_focus.png

Compass自动生成不同状态下背景的相应样式。

2.7 Helpers模块

Helpers提供一些函数。
比如image-url()。

如果我们直接写图片的URL，可能会出错。假设我们在项目目录下有一个存放图片的images目录：

@import "compass";p{    background:url('test.png');}

生成的CSS：

p {  background: url("test.png");}

这样会找不到路径。

在config.rb文件中有一个配置项：

images_dir = "images"

这项配置指定了图片的目录，接着使用image-url()就可以找到config.rb中images_dir指定的图片目录下的正确地址。

@import "compass";p{    background:image-url('test.png');}

生成的CSS：

p {  background: url('/images/test.png?1475397292');}

这样就正确了。

但这样生成的URL是绝对地址，Compass默认把config.rb所在目录看成是根目录。我们可以修改config.rb来让Compass使用相对地址：

relative_assets = true

这样生成的URL为：

p {  background: url('../images/test.png?1475397292');}

与image-url()相类似的还有font-url()和stylesheet-url()，用法相同。

Helpers中还有一个CSS3中经常用到的font-files()，用于返回font的url和format信息，通常配合font-face的mixin使用：

@include font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"));.example {  font-family: "Blooming Grove";  font-size: 1.5em;}

生成的CSS：

@font-face {  font-family: "Blooming Grove";  src: url('/fonts/examples/bgrove.ttf?1408149819') format('truetype'), url('/fonts/examples/bgrove.otf?1408149819') format('opentype');}.example {  font-family: "Blooming Grove";  font-size: 1.5em;}

font-files()返回的URL地址跟image-url()一样，需要在config.rb中配置：

fonts_dir = "fonts"

0 0

Compass学习指南

1. 安装和使用

1.1 安装

1.2 创建项目

1.3 编译

1.4 Compass的模块机制

2. 模块

2.1 Reset模块

2.2 Layout模块

2.2.1 Stretching子模块

2.2.1 Sticky Footer子模块

2.3 CSS3模块

2.3.1 background-size

2.3.2 border-radius

2.3.3 opacity

2.3.4 inline-block

2.4 Browser Support模块

2.5 Typography模块

2.5.1 Links

2.5.2 Lists

2.5.1 Text

2.6 Utilities模块

2.6.1 精灵合图

2.7 Helpers模块