Compass用法

一、什么是Compass?

Compass是Sass的工具库,Compass在SASS的基础上,封装了一系列有用的模块去补充Sass的功能,类似Javascript和jQuery

二、安装

之前已经写过文章讲了sass、compass的安装,地址:http://www.cnblogs.com/laayoune/p/4105105.html

三、创建项目

在Ruby的命令行中输入

compass create myproject

会在当前目录下创建一个myproject的目录,myproject也可以是一个路径参数

image

上面是创建的目录结构,下面是告诉你在html中的引用

config.rb是配置文件

image

上面的是css、sass、image、js的存放目录

最后是使用sass语法缩进

可以通过修改该文件进行项目配置,也可以在使用用compass create命令时进行配置:

--bare (不包含默认样式表进行安装);
--syntax sass (在默认样式表中使用缩进语法);
--sass-dir "cool" (使用'cool'目录存放Sass文件);
--css-dir "style" (使用'style'目录存放CSS文件);
--images-dir "img" (使用'img'目录存放图片);
--fonts-dir "type" (使用'type'目录存放字体文件);
--javascripts-dir "js" (使用'js'目录存放JavaScript文件)。

如:compass create myproject --sass-dir "cool" --css-dir "style"

四、项目编译

编译命令:compass compile

该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在config.rb配置的css-dir对应的目录中。

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

compass compile --output-style compressed

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

compass compile –force

每次都要进行编译太麻烦,可以自动检测,只要sass文件夹发生变化(修改、增加文件),scss文件就会被自动编译成css文件。

compass watch

一些其他的命令

compass init——为一个已经存在的项目(Rails)添加compass;
compass clean——移除生成的文件和缓存;
compass stats——查看样式表的统计数据;
compass unpack <extension>——解压扩展到你的项目;
compass validate——验证你生成的CSS文件;
compass version——显示版本、许可证,等等;
compass interactive——进入一个用于测试Compass中SassScript的控制台。

compass help <具体命令>——获得帮助/具体命令的详细描述

五、Compass模块

Compass采用模块结构,不同模块提供不同的功能

1、reset

@import "compass/reset";   //reset模块,重置浏览器的默认样式

有时不需要进行全局的样式重置,可以单独重置某一块

reset-html5                  HTML5样式重置

reset-box-model           移除元素的内外边距和边框
reset-font                    重置文字的字号和基线
reset-focus                  移除浏览器提供的轮廓线(比如Safari给<input>元素加上的那一圈线)
reset-table 和 reset-table-cell              重置表格的边框和对齐方式
reset-quotation                                 为<blockquotes>添加仅存在于样式表中的双引号

用法:

@import "compass/reset/utilities";

@include reset-html5;

2、layout

@import "compass/layout"; 

如:

@include sticky-footer(54px);   //页脚54px高,始终位于页面底部

3、CSS3

提供CSS3命令,常用的如圆角等

@import "compass/css3";

使用时:

@include border-radius(5px);

4、typography

该模块提供版式功能

@import "compass/typography";

如:链接颜色

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

5、utilities

提供某些不属于其他模块的功能,如reset中引入的混合器就包含在utilities中

@import "compass/utilities/";

如:清除浮动

@include clearfix;

六、Helper函数

Compass还提供一系列函数,如:

image-width($image)、cos($number)

有关compass的所有相关模块和函数,可以查看http://compass.aether.ru/,里面有详细的用法讲解和例子

原文地址:https://www.cnblogs.com/laayoune/p/4105415.html