Compass用法指南

简介:

Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配Compass,它才能显出真正的威力。

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

本文假设你已经掌握了CSS的主要用法,如果你还懂Sass,那就更好了。但是不懂Sass,一样可以阅读本文。

一、Compass是什么?

简单说,Compass是Sass的工具库(toolkit)。

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

二、安装

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

假定你的机器(Linux或OS X)已经安装好Ruby,那么在命令行模式下键入:

  sudo gem install compass

如果你用的是Windows系统,那么要省略前面的sudo。

正常情况下,Compass(连同Sass)就安装好了。

三、项目初始化

接下来,要创建一个你的Compass项目,假定它的名字叫做myproject,那么在命令行键入:

  compass create myproject

当前目录中就会生成一个myproject子目录。

进入该目录:

  cd myproject

你会看到,里面有一个config.rb文件,这是你的项目的配置文件。还有两个子目录sass和stylesheets,前者存放Sass源文件,后者存放编译后的css文件。

接下来,就可以动手写代码了。

四、编译

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

Compass的编译命令是

  compass compile

该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中。

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

  compass compile --output-style compressed

Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数。

  compass compile --force

除了使用命令行参数,还可以在配置文件config.rb中指定编译模式。

  output_style = :expanded

:expanded模式表示编译后保留原格式,其他值还包括:nested、:compact和:compressed。进入生产阶段后,就要改为:compressed模式。

  output_style = :compressed

也可以通过指定environment的值(:production或者:development),智能判断编译模式。

  environment = :development

  output_style = (environment == :production) ? :compressed : :expanded

在命令行模式下,除了一次性编译命令,compass还有自动编译命令

  compass watch

运行该命令后,只要scss文件发生变化,就会被自动编译成css文件。

更多的compass命令行用法,请参考官方文档

五、Compass的模块

Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:

  * reset
* css3
* layout
* typography
* utilities

下面,我依次介绍这五个内置模块。它们提供Compass的主要功能,但是除了它们,你还可以自行加载网上的第三方模块,或者自己动手编写模块。

六、reset模块

通常,编写自己的样式之前,有必要重置浏览器的默认样式。

写法是

  @import "compass/reset";

上面的@import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码

七、CSS3模块

目前,该模块提供19种CSS3命令。在这里,我介绍其中的三种:圆角、透明和行内区块。

7.1 圆角

圆角(border-radius)的写法是

  @import "compass/css3";

  .rounded {
@include border-radius(5px);
}

上面的@include命令,表示调用某个mixin(类似于C语言的宏),5px是参数,这里用来指定圆角的半径。

编译后的代码为

  .rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

如果只需要左上角为圆角,写法为

  @include border-corner-radius(top, left, 5px);

7.2 透明

透明(opacity)的写法为

  @import "compass/css3";

  #opacity {
@include opacity(0.5);
}

编译后生成

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

opacity的参数0.5,表示透明度为50%。

完全透明的写法是

  @include opacity(0);

完全不透明则是

  @include opacity(1);

7.3 行内区块

行内区块(inline-block)的写法为

  @import "compass/css3";

  #inline-block {
@include inline-block;
}

编译后生成

  #inline-block {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}

八、layout模块

该模块提供布局功能。

比如,指定页面的footer部分总是出现在浏览器最底端:

  @import "compass/layout";

  #footer {
@include sticky-footer(54px);
}

又比如,指定子元素占满父元素的空间:

  @import "compass/layout";

  #stretch-full {
@include stretch;
}

九、typography模块

该模块提供版式功能。

比如,指定链接颜色的mixin为:

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

使用时写成:

  @import "compass/typography";

  a {
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

十、utilities模块

该模块提供某些不属于其他模块的功能。

比如,清除浮动

  import "compass/utilities/";

  .clearfix {
@include clearfix;
}

再比如,表格

  @import "compass/utilities";

  table {
@include table-scaffolding;
}

编译后生成

  table th {
text-align: center;
font-weight: bold;
}

  table td,
table th {
padding: 2px;
}

  table td.numeric,
table th.numeric {
text-align: right;
}

十一、Helper函数

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

有些函数非常有用,比如image-width()image-height()返回图片的宽和高。

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

  @import "compass";

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


编译后得到

  .icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

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

(完)

目录
相关文章
|
4月前
|
JSON NoSQL MongoDB
Compass
【6月更文挑战第8天】Compass
83 9
|
5月前
|
JSON 数据格式
Cannot parse date while it seems to fit format ‘yyyy-MM-dd‘T‘HH:mm:ss.SSSZ‘
Cannot parse date while it seems to fit format ‘yyyy-MM-dd‘T‘HH:mm:ss.SSSZ‘
558 0
|
10月前
proxy_pass
proxy_pass
30 1
|
网络协议 Linux
ss 命令
ss 命令
2943 0
|
自然语言处理 算法 数据挖掘
浅谈Single-Pass算法
Single-Pass算法又称单通道法或单遍法,是流式数据聚类的经典方法。对于依次到达的数据流,该方法按输入顺序每次处理一个数据,依据当前数据与已有类的匹配度大小,将该数据判为已有类或者创建一个新的数据类,实现流式数据的增量和动态聚类,适合对流数据进行挖掘,而且算法的时间效率高;不足之处主要表现在该方法具有输入次序依赖特性,即对于同一聚类对象按不同的次序输入,会出现不同的聚类结果。
229 0
SS搭建
很多教程在这里或其他平台都无法访问,所以以后有关这些东西会在github上更新,大家可以在我的github上查看https://github.com/HarryHq/ffa
1692 0
|
网络安全
|
网络安全
|
关系型数据库