使用Compass框架进行CSS写作

Compass是一款开源的CSS写作框架

Compass需要Sass支持.Sass
是CSS3的扩展,允许添加拓补规则,变量,mixins,选择器继承...等等Sass可以生成格式良好的CSS代码,使得你的样式更加易于组织和维护.

为什么使用Compass.

• Experience cleaner markup without presentational classes.
• It’s chock full of the web’s best reusable patterns.
• It makes creating sprites a breeze.
• Compass mixins make CSS3 easy.
• Create beautiful typographic rhythms.
• Download and create extensions with ease.

如何使用

1.首先安装ruby环境

• ruby安装
• irb回车进入命令行模式
• ruby快速学习
• 包管理, 可以使用gem命令行操作.

gem经常遇到安装插件失败，其实换一个源就好了

$ gem update --system # 这里请翻墙一下
$ gem -v
2.6.3 (尽量使用2.6+版本)
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.org
#确保只有 gems.ruby-china.org

常见问题？

如果遇到 SSL 证书问题，你又无法解决，请直接用http://gems.ruby-china.org 避免 SSL 的问题。
如果你在意 Gem 下载的安全问题，请正确安装 Ruby、OpenSSL，建议部署 Linux 服务器的时候采用 这个 RVM 安装脚本 的方式安装 Ruby。
Bundler::GemspecError: Could not read gem at /home/xxx/.rvm/gems/ruby-2.1.8/cache/rugged-0.23.3.gem. It may be corrupted.，这类错误是网络原因下载到了坏掉的文件到本地，请直接删除那个文件。

然后安装想要安装的插件 gem install xxxxxx

gem search -r  =>返回 gem列表. 
gem search -r --local(-l) =>返回全局安装的gem列表
gem install [gem] =>安装gem 详见 RubyGems’ docs.

2.然后通过ruby gem 命令行安装sass和compass

$ gem update --system
$ gem install sass
$ gem install compass
$ cd <myproject>
$ compass install compass

3.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命令。在这里，我介绍其中的三种：圆角、透明和行内区块。

圆角

圆角（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);

透明

透明（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);

行内区块

行内区块（inline-block）的写法为

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

编译后生成

#inline-block {: -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还提供一系列[函数](http://compass-style.org/reference/compass/helpers

有些函数非常有用，比如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命令，可以直接调用。