Compass用法指南

日期:2015-07-04 09:26:23

上一节介绍了Sass的安装,但是,只有搭配Compass,它才能显出真正的威力。

本文介绍Compass的用法。毫不夸张地说,学会了Compass,你的CSS开发效率会上一个台阶。

1436964730876677.jpg

如果你掌握CSS的用法而且你还懂Sass,那就更好了。但是不懂Sass,一样可以阅读本文。

一、Compass是什么

Compass是Sass的工具库(toolkit)。

Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

二、Compass安装

Compass是用Ruby语言开发的,所以安装它之前,必须安装Ruby。

上一节我们已经讲了Sass的安装,那时我们的ruby环境已经安装好了。

接下来就像安装Sass一样在命令行输入安装Compass的命令:

gem install compass

一般情况下Compass在安装Sass的时候已经一同安装了。

三、创建一个项目

接下来要创建一个Compass项目,我们给项目起个名字叫做myproject,那么在命令行输入:

compass create myproject

然后在当前目录就会出现一个myproject的文件夹。进入目录是这样的:

1436964732358086.jpg

你会看到有一个config.rb的文件,这是项目配置文件,sass文件夹存放的是Sass源文件,stylesheets文件夹存放的是编译后的CSS文件。

四、编译

写代码之前我们还要学会如何编译。因为我们写出来的是后缀名为.scss的文件,只有编译成CSS文件,才能用到网站上。

在命令行进入项目文件夹,然后输入Compass的编译命令:

compass compile

这时候我们在.scss文件里写的代码就会被编译出来。

测试一下,在项目文件里给body的背景设置为红色,在未编译的情况下是这样的

1436964735124988.jpg

命令行输入编译命令后:

1436964739245659.jpg

五、监听

实际开发中每次修改.scss时不可能每修改一次就编译一次,于是我们就要用到监听命令:

compass watch

监听的作用是每次修改保存.scss文件后自动帮我们编译成CSS,这样我们就可以专心写样式了。输入监听命令后再添加新代码片段保存后就会发现我们想要的已经编译好了。

默认状态下,编译出来的CSS文件带有大量的注释。但是,生产环境需要压缩后的CSS文件,这时要使用output-style参数。

compass compile --output-style compressed

通常情况下都在config.rb文件里修改CSS输出格式。我们找到有output_style的一行,把前面的#去掉,就开启了它的功能,接着设置我们需要的输出格式。

output_style = :compressed

在config.rb里修改输出格式后我们需要在命令行重启监听compass watch,然后输出格式就变成我们想要的了。注意,每修改一次编译风格都需要重启监听。

六、Compass核心模块

Compass采用模块结构,不同模块提供不同的功能。目前官网文档中看到,它内置有六个模块:

Reset
Layout
CSS3
Typography
Utilities
Helpers

在项目开发中除了Reset和Layout模块需要单独引用外其它模块只需要引入@import "compass";就行了,当然每个模块都可以按自己需要单独引用。

下面依次介绍这几个模块的功能,除了Compass提供的模块以外,你还可以自行加载网上的第三方模块,或是自己动手编写模块。

6.1 Reset模块

Reset模块是浏览器样式重置模块,主要用来减少不同浏览器间的差异性。我们知道一般在写页面时都会将一些标签的margin和padding值设为0,而Reset模块就是用来做这个的。

在使用时必须要单独引入才能生效:

@import "compass/reset";

6.2 Layout模块

layout是用来提供页面布局的控制能力,比如说将一个容器内的子元素横向拉伸纵向拉伸占满。

layout模块又提供了三个功能模块,分别是Grid Backgrounds、Sticky Footer和Stretching模块。

layout模块必须要单独引入才能生效:

@import  "compass/layout";

下面来说下Stretching模块,看看它给我提供的Mixins:

.stretch-full {
  @include stretch();
}

编译后CSS为:

.stretch-full {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

stretch()提供了四个参数,分别是top、right、bottom、left,跟CSS简写顺序一样,下面来试验一下:

.stretch-full {
  @include stretch(10px, 9px, 8px, 7px);
}

编译后代码:

.stretch-full {
  position: absolute;
  top: 10px;
  bottom: 8px;
  left: 7px;
  right: 9px;
}

layout使用率不是很高,它的模块提供的功能有兴趣的同学可以自行探索。

6.3 CSS3模块

CSS3模块作为compass模块中核心模块之一,它的使用频率在CSS3开发中主动使用频率最高,能帮我们轻松实现CSS3属性里面各种效果,主要提供跨浏览器的CSS3的能力。

需要说明的是在使用CSS3模块之前必须要在.scss中引入,不然使用后会报错:

@import "compass";

当然还可以单独引入:

@import "compass/css3";

下面以CSS3新属性线性渐变为例:

.linear-gradient{
  @include background(linear-gradient(top, #ccc, #000));
}

编译后的CSS为:

.linear-gradient{
  background:url('data:image/svg+xml;base64,PD94b...zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #000000));
  background: -moz-linear-gradient(top, #cccccc, #000000);
  background: -webkit-linear-gradient(top, #cccccc, #000000);
  background: linear-gradient(to bottom, #cccccc, #000000);
}

 

CSS3模块提供了众多的CSS3属性Mixin,在CSS3项目开发中会大大减少我们的时间,而随着CSS3不断发展壮大,有些CSS3属性不用浏览器厂商前缀就已经得到很好的支持,而Compass依然保持之前的前缀,关于浏览器厂商前缀这一块,在用到CSS3模块的时候要留意下,各个浏览器对新属性的支持情况,从而选择我们需要的,去除我们不需要的。

6.4 Typography模块

Typography模块主要是用来修饰文本样式和垂直韵律等,此模块又包含四个功能模块分别是:Links、Lists、Text、Vertical Rhythm。

Links模块主要用来修饰超链接样式。
Lists模块主要用来修饰列表的样式。
Text模块主要用来修饰文本的样式。
Vertical Rhythm模块主要用来垂直韵律(字体大小行高等)。


下面来看一个文本超出显示省略号的例子,Text模块提供了封装好的Mixin:

.ellipsis {
  @include ellipsis();
}

 编译后的CSS:

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

Typography模块主要用于大篇幅文本的修饰,里面的功能比较琐碎,有兴趣的同学可以动手实践一下。

6.4 Uitilies模块

Uitilies模块是辅助工具模块,里面又分五个功能模块,分别是Color、General、Print、Sprites、Tables模块,其中比较常用的两个模块General和Sprites模块。

General模块提供的功能Mixin有Clearfix清除浮动、Float跨浏览器浮动、Hacks提供解决ie浏览器hack问题、Minimums 设置最小高度和最大宽度的、Tag Cloud标签云。

拿比较常用的Clearfix清楚浮动来举例:

.clearfix {
  @include pie-clearfix();
}

编译后的代码:

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

Sprites模块主要提自动生成精灵图的功能,我们知道项目开发中为了减少对服务器的请求都会用到精灵图片,如果手动的制作精灵图片会耗费很多时间,而Sprites出现彻底解决了难题,它会自动生成精灵图,并计算图片大小和位置会大大减少开发时间。后面会有单独介绍Sprites模块的文章。

6.4 Helpers函数模块

 除了模块,Compass还提供一系列函数。

 有些Helpers函数非常有用,比如image-width()image-height()返回图片的宽和高,我们可以利用这些函数编写功能强大的组件。

函数代码实例:

.icon {
  width: image-width("favicon.png");
  height: image-height("favicon.png");
}

编译后:

.icon {
  width: 200px;
  height: 200px;
}

再比如,inline-image()可以将图片转为data协议的数据。

.icons {
  background: inline-image("favicon.png");
}

编译后得到:

.icons {
  background: url('data:image/png;base64,iVBORw...QmCC');
}

 函数与mixin的主要区别是,不需要使用@include命令,可以直接调用。

由于Compass更新进度慢,现在它基本除了sprites模块几乎所有模块都有其它方案可以替代,特别是CSS3厂商前缀的Mixin,许多属性已经不需要厂商前缀了,而它还是继续输出过时的前缀,这样会给产生多余代码,如果它的更新速度能跟上,它还是很不错的选择。