Compass用法指南

Compass用法指南

作者: 阮一峰

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

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

时间: 2024-10-11 22:44:23

Compass用法指南的相关文章

SASS用法指南

学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事. 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor).它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 各种"CSS预处理器"之中

bootstrap快速入门笔记(四)-less用法指南, mixin和变量

一,less变量,less文件 1.bootstrap.less 这是主要的 Less 文件.该文件中导入了一些其他的 less 文件.该文件中没有任何代码. 2.forms.less 这个 Less 文件包含了表单布局.输入框类型的样式. 3.mixins.less 4.这个 Less 文件让 CSS 代码可重复使用. 5.patterns.less 这个 Less 文件包含了重复的用户界面元素的 CSS 代码,不会被位于 scaffolding Less 文件中的基本样式覆盖. 6.rese

SASS用法指南(转)

学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事. 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor).它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 各种"CSS预处理器"之中

Excel—SUMPRODUCT用法指南

1.最简单的SUMPRODUCT函数等同与SUM函数. 2.SUMPRODUCT可以设置多参数,其输出值为各参数对应值的乘积之和. E2=6*7+8*6+2*8+9*8+3*8+5*9 3.SUMPRODUCT可以设置更多的参数. 4.SUMPRODUCT可以实现多条件求和. G2中的公式,描写的是满足A和SAM两个条件的对Project进行求和的算法. (A2:A13=E2)+0可以生成值为TRUE 和 FALSE的一列数组,(B2:B13=F2)+0同理.再和最后一列数组相乘后,即可以得到满

英语用法指南 Practical English Usage

1. abbreviated styles  简略的文体 有些书面语和口语的文体有其特殊的语法规则,这往往是因为需要节省篇幅或时间. @ 广告和说明书 简短的广告和说明书往往省略冠词.作主语或宾语的代词.be的各种形式和介词. Single man looking for flat Oxford area. Please 806127 weekends. 单身男子在牛津区寻求住房一套.请于周末致电806127. Job needed urgently. Will do anything lega

织梦dedecms简略标题调用标签用法指南

我们在使用织梦DEDECMS建站过程中,为了使调用的文章标题简短且相对完整(原文标题太长),只好使用了调用简略标题这个方法,使标题显示为简短标题,指向标题时显示完整的标题.并获得文章静态地址链接 下面来看看DEDE织梦CMS简略标题调用方法:  使用的代码如下: 复制代码 代码如下: <ul>  {dede:arclist titlelen='60' orderby='pubdate' row='6' typeid='5'}  <li><a href=”[field:arcu

Chrome性能分析工具lightHouse用法指南

本文主要讲如何使用Chrome开发者工具linghtHouse进行页面性能分析. 相关参考&内容来源: 插件下载地址:https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk 原文地址:https://www.cnblogs.com/zhaoweikai/p/9663503.html

Sass和Compass安装

心血来潮,想用下Sass. 先安装,先装ruby,官网下载即可,双击安装,需要注意的是在安装过程中,选择将ruby加入环境变量,这样我们就可以在命令行下用了. 然后就是安装Sass,一条命令即可 gem install sass 但是,竟然被墙了..使用下面的方法,原文地址:http://www.w3cplus.com/sassguide/install.html 使用淘宝的镜像地址. $ gem sources --remove https://rubygems.org/ $ gem sour

from 阮一峰

JavaScript面向对象编程(一):封装 原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript面向对象编程(二):构造函数的继承: 原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html Javascript面向对象编程(三):