一、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命令,可以直接调用。

Compass入门的更多相关文章

  1. [转]前端利器:SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  2. 前端利器:SASS基础与Compass入门

    SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...

  3. Sass和Compass入门

    一.前言 1.Sass是什么? Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者 ...

  4. Lucene、Compass学习以及与SSH的整合

    一.准备 个人在学习中采用Struts2 + Hibernate3.2 + Spring2.5 + Compass2.2.0, 一下图片为本次学习中用到的jar包: 图中圈出的jar包为本次学习的主要 ...

  5. 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less

    写在前面乱七八糟的前言: emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自 ...

  6. Compass 更智能的搜索引擎(1)--入门

    学完了前面的Lucene系列教程: 全文检索 Lucene(1)–入门 全文检索 Lucene(2)–进阶 全文检索 Lucene(3)–分页 全文检索 Lucene(4)–高亮 Lucene确实是个 ...

  7. html5快速入门(一)—— html简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  8. MATLAB入门教程

    MATLAB入门教程   1.MATLAB的基本知识 1-1.基本运算与函数    在MATLAB下进行基本数学运算,只需将运算式直接打入提示号(>>)之後,并按入Enter键即可.例如: ...

  9. sass、less和stylus的安装使用和入门实践

    刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...

随机推荐

  1. [转][修]C清空输入缓冲区

    为何要清空输入缓存区     读取时输入缓冲区中的内容会被scanf函数逐个取走,正常case下scanf()函数可以根据返回值判断成功取走的数目:但当发生读取异常之后,输入缓冲区中的内容并未被取走, ...

  2. Tornado异步(2)

    Tornado异步 因为epoll主要是用来解决网络IO的并发问题,所以Tornado的异步编程也主要体现在网络IO的异步上,即异步Web请求. 1. tornado.httpclient.Async ...

  3. linux(一)export的生命周期

    本文从shell执行的角度分析export变量的生命周期 # 只对当前shell环境起作用,比如通过不同的远程ssh就是不同的shell环境 export k=v 当运行一个.sh文件或者是shell ...

  4. python列表解析进阶

    如果要获得一个(元素为整数的)列表里面的偶数,很容易想到列表解析: [i for i in nums if i%2==0] 但是如果要使列表的长度不变,让奇数用0来填充,可能你会直接写: [i for ...

  5. MyEclipse2014.Maven自动更新

    1.我把 "Do not automatically update dependencies from remote repositories" 和 "Download ...

  6. vs 2017 保存文件 utf8

    vs 2017 保存文件 utf8 转自:https://blog.csdn.net/jiegemena/article/details/79369650

  7. 1-24-case流程控制和while循环语句的使用

    大纲: 1.while循环控制语句 while实战---批量添加规则用户 while实战---猜价格游戏 2.case流程控制语句和exit退出 exit实战---返回值测试 case实战---智能解 ...

  8. Vim代码缩进设置

    前段配置VPS,无奈只能使用Vim编辑Python代码,比较头疼的没法设置自动缩进,所以搜索了相关的配置,特记录如下. 将以下的设置加入到~/etc/vim/.vimrc中: set sw=4 set ...

  9. TCP/IP网路协议复习

    1.OSI (Open System Interconnect Protocol) 开放互联协议,这是一个七层的计算机网络协议,包括:物理层.数据链路层.网络层.传输层.回话层.表示层.应用层.    ...

  10. 高射炮打蚊子丨在VS 2017里用C语言写经典的冒泡排序

    ​上一期<高射炮打蚊子丨用Visual Studio 2017写最初级的C语言程序>中,我们用Visual Studio “全宇宙最强IDE”这门大炮,打了“C语言写Hello World ...