Compass 笔记

前端 101

安装

sudo gem install -n /usr/local/bin compass

使用sudo gem install compass会报一个下面描述的错误，所以我使用了如上的命令。
 While executing gem ... (Errno::EPERM)
 Operation not permitted - /usr/bin/compass

项目初始化

创建一个名为『firstproject』的项目 

compass create firstproject

进入该目录 

cd firstproject

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

编译

terminal 命令

写玩 scss 文件之后，要编译成 css 文件才能应用在网页上，编译的指令是 

compass compile

命令在项目根目录下运行，会将sass子目录中的scss文件，编译成css文件，保存在stylesheets子目录中。
 默认状态下，编译出来的css文件带有大量的注释。但是，生产环境需要压缩后的css文件，这时要使用--output-style参数。 

compass compile --output-style compressed

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

compass compile --force

在命令行模式下，除了一次性编译命令，compass还有自动编译命令，运行该命令后，只要scss文件发生变化，就会被自动编译成css文件。 

compass watch

config.rb配置文件

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

:expanded模式表示编译后保留原格式，其他值还包括:nested、:compact和:compressed。 

output_style = :expanded

进入生产阶段时，就需要改为:compressed; 

output_style = :compressed

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

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

compass 模块

使用compass中封装的模块能够更加方便快速的编写css样式文件

reset 模块

为了避免不同的浏览器各式各样的标准，写样式之前是要重置浏览器的默认样式的。
 写法如下 

@important "compass/reset";

@import命令，用来指定加载模块，此处就是用来加载 reset 模块，也可以从网上下载其他的样式重置模块。

CSS模块 和 Browser Support 模块

因为浏览器内核有不止一种，所以需要提供一些css3跨浏览器的支持；在使用css3时很多时候都要调整bowser_support模块的支持。
 举个例子：

圆角

一般如果自己写一个圆角的效果要这样写： 

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

而我们可以使用css3模块来避免重复的工作 

//scss
@import "compass/css3";  //引入CSS3模块
.rounded {
　　　　@include border-radius(5px);
}

编译后的文件如下：
//css
.rounded {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
}

如果不需要-moz模块，这时可以调用browser模块，改变需要的模块 

@import "compass/support";
//设置只支持chrome
$supported-browsers:chrome;

同时还可以指定支持浏览器的最小版本号 

$browser-minimum-versions:("ie": "8");

透明度

透明（opacity）的写法为 

@import "compass/css3";
#opacity {
    @include opacity(0.5); 
}

编译过后的文件如下： 

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

行内区块

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

@important "compass/css"
#inline-block {
    @include inline-block;
}

编译后的文件为： 

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

Typography模块

主要用来修饰一下文本样式，链接样式等

链接 Link

//链接样式
@import "compass/typography/links";
a{
    @include hover-link();
}

编译后为: 

a {
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}

链接颜色 link-color

//修改不同状态下的超链接颜色
@import "compass/typography/links";
a{
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

编译后的文件 

//依次参数列表
a {
  color: #00c;
}
a:visited {
  color: #ccc;
}
a:focus {
  color: #cc0;
}
a:hover {
  color: #0cc;
}
a:active {
  color: #c0c;
}

列表布局 list

@import "compass/typography/lists";
.list-unstyled{
    @include no-bullets();
}

编译后的CSS文件为： 

.list-unstyled {
  list-style: none;
}
.list-unstyled li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

Layout 模块

该模块提供布局功能
 比如，指定页面的footer部分总是出现在浏览器最底端： 

@import "compass/layout"
# footer {
    @include "sticky-footer(54px)";
}

编译后的文件为： 

#footer html, #footer body {
  height: 100%;
}
#footer #root {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -54px;
}
#footer #root #root_footer {
  height: 54px;
}
#footer #footer {
  clear: both;
  position: relative;
  height: 54px;
}

指定子元素占满父元素的空间: 

@import "compass/layout";
#stretch-full {
    @inlcude stretch;
}

编译后的文件为： 

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

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

Comments
Write a Comment