几个月前,我介绍了Sass的用法。
Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配Compass,它才能显出真正的威力。
本文介绍Compass的用法。毫不夸张地说,学会了Compass,你的CSS开发效率会上一个台阶。
本文假设你已经掌握了CSS的主要用法,如果你还懂Sass,那就更好了。但是不懂Sass,一样可以阅读本文。
一、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命令,可以直接调用。
(完)
魏蕤 说:
神器在手,天下我有。
2012年11月29日 17:32 | # | 引用
rian 说:
顶,解决了写大量CSS的烦恼,绝对有助于开发效率
2012年11月29日 18:56 | # | 引用
WebExpressor 说:
期待compass和第三方sass库整合的文章,例如:https://github.com/MoOx/compass-recipes
2012年11月29日 20:51 | # | 引用
野草莓 说:
一峰兄,为什么老看不见你在知乎活动呀?是没有时间,还是没有兴趣呀O(∩_∩)O~
知乎上的很多问题,我都很希望看到你的观点呀……
知乎上好像有你注册的ID的(我还添加关注了呢),很希望能够经常在知乎上看到你有具体的针对性的观点啊^_^
另,我不是知乎的工作人员,我只是很喜欢你也很喜欢用知乎哈哈……
2012年11月29日 21:27 | # | 引用
邓安良 说:
可惜暂时没有时间做这方面的了,留言纯属支持
2012年11月29日 22:06 | # | 引用
reverland 说:
看到第一反应竟然去找python代替……
2012年11月29日 23:37 | # | 引用
15640138121沈阳 说:
小阮同志就靠你一人能壮大到哪去呢,我们的思想在一个级别,我们应该合作,我准备支援你提供一些物理方面的文章,当然是我自己写的,这样一定能提高你网站的访问量。拥有自由思想的物理学家的头脑你就见识一下吧,你是IT我是物理握握爪。叫我渴至心,我是电脑白痴,计算机知识要多指教。
2012年11月30日 21:46 | # | 引用
dawncold 说:
感觉有些less的影子。。。
2012年12月 2日 10:30 | # | 引用
15640138121沈阳 说:
在这个官僚主义的环境里我是特殊的存在,没有一个朋友是当然的,因为我演技差,也不懂得如何从外表上鉴定哪些人的脑袋没被腐化。没错,聪明人和蠢人看起来都‘差不多’,一件事情在知道前和知道后当然是不一样的,具体差距估计没几个人能讲出来。人类中就是有这样一种潜力是只供善于思考的人使用的。
2012年12月 2日 18:47 | # | 引用
24青春 说:
很好的方法, 以后可以尝试一下。
2012年12月 2日 22:34 | # | 引用
15640138121沈阳 说:
阮过来帮帮忙左下角总写着‘已完成,但网页出现错误’这是什么情况?而且google总上不去,其他的都还‘正常’。
2012年12月 3日 12:46 | # | 引用
15640138121沈阳 说:
我忘说了,google正进行支持互联网自由言论活动呢。
2012年12月 3日 12:51 | # | 引用
java6ean 说:
建议阮哥试试 angularjs & bootstrap组合:
http://twitter.github.com/bootstrap/
http://angularjs.org/
2012年12月 3日 14:33 | # | 引用
甄码农 说:
这个语法的学习成本还是有的。学习成本是个问题!
2012年12月 3日 17:47 | # | 引用
Tiankui 说:
记得less就是借鉴的sass
2012年12月27日 15:49 | # | 引用
深蓝 说:
额,跟Less 有些像。
2012年12月31日 23:40 | # | 引用
Magic 说:
为什么要解决目前的问题,都要重新发明新的“神器”?让我们程序猿每天都在学习新的语言和工具吗。。。呵呵
2013年1月29日 16:23 | # | 引用
lorrylockie 说:
#opacity {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
}
=>
Opacity=50
2013年2月19日 13:38 | # | 引用
raphealguo 说:
阮老师,最近写的CSS处理器也是支持Sprite功能:http://rapheal.sinaapp.com/2013/02/26/extcss1-0/,能点评一下吗?
2013年2月27日 16:04 | # | 引用
hit9 说:
一样~
2013年4月 8日 18:29 | # | 引用
老糙 说:
production和development环境,有什么具体的用途,区别是什么?网上找了好久没找到相关信息。
2013年5月30日 23:38 | # | 引用
路人甲 说:
能不能说说在Windows下的使用啊?很多这类教程都是基于Linux的,但是对于Windows原住民,我们就各种对不上了。动辄命令行。。。。
2013年10月18日 15:13 | # | 引用
webpin 说:
每次都要输入一个很长的“@include xxxx”可不可以有简短的写法?少按一次键盘也是好的~~
我希望的css预处理器仅用于开发过程,重点功能有:1支持多文件(多模块)组合方式,2就是极短的缩写(比如float:left->fl),3多层次嵌套,问问高手,有没有这样的预处理器?
2014年1月16日 17:52 | # | 引用
Albert Yu 说:
@import,解决第一个问题
emmet,解决第二个问题
第三个问题 sass 自己就支持的
所以你的问题现在根本不是问题了
2014年3月21日 04:01 | # | 引用
潘逸飞 说:
很棒的Compass文章
2014年4月 9日 11:04 | # | 引用
Leee 说:
请问与compass比起来,您认为Libsass(与compass类似的sass编译器)如何咧?
2014年4月14日 22:08 | # | 引用
匠人 说:
less是2010年才有的 sass是2007年 谁有谁的影子 自辩啊
2014年11月13日 10:36 | # | 引用
Bruno 说:
阮老师,你写的太棒了,学到很多东西,感觉这个Compass Sass太有用的,请问老师有没有 Less和它的toolkit的介绍文章?
2014年12月19日 16:00 | # | 引用
好的 说:
在想有么有python版的
2015年1月15日 16:14 | # | 引用
的飞洒 说:
那你应该学习什么?
2015年2月 5日 13:26 | # | 引用
暮头 说:
阮老师的文简洁易懂,赞!
2015年4月20日 15:04 | # | 引用
kiinlam 说:
最后一句:函数与mixin的主要区别是,不需要使用@include命令,可以直接调用。
补充下我的想法,除了是否使用@include语法之外,还有个区别:
函数是返回一个值,用在样式的属性上,
如 color: darken(10%);
这里是用户函数的返回值;
mixin则是返回了属性-值对,它在定义时就已经规定了有哪些属性,
如 @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity);}
2015年5月 6日 15:01 | # | 引用
adin 说:
老师好,utilities模块下的清除浮动import少了个@
2015年6月19日 17:45 | # | 引用
adin 说:
文中Compass CSS3模块上提到:
@include border-corner-radius(top, left, 5px);
这样写法我觉得并不是Compass推荐的。
推荐写法应该是:@include border-top-left-radius(5px);
compass源码里面border-corner-radius只是用来下面公用的。
比如说你要让上面的是圆角
border-top-radius(5px); 就可以了
2015年7月 2日 17:35 | # | 引用
balbeleet 说:
确实呵呵 ,拒绝体制 喜欢创造 使用重新选择程序员
2015年8月 1日 16:58 | # | 引用
阮野 说:
后面几个模块引用出来一只报错,不知道什么原因
2015年9月29日 14:29 | # | 引用
神刀 说:
请问sass项目如何跟已有的项目进行整合呢?
2015年11月16日 11:34 | # | 引用
神刀 说:
请问compass项目如何跟已有的项目进行整合呢?
2015年11月16日 11:34 | # | 引用
yanhaijing 说:
好赞啊
2015年12月28日 11:56 | # | 引用
咕咕咕鸡 说:
读了你不少文章,发现我学的都是你几年前写的东西,我是小渣渣
2016年6月21日 22:29 | # | 引用
石海伟 说:
我也是报错 。。。
2016年7月 1日 10:12 | # | 引用
雷逸鸥 说:
行文简单明了 支持支持。。
2016年7月 1日 13:01 | # | 引用
一波 说:
除了第一个模块 @import "compass/reset"; 不报错,其他都报错。。。在网上找了半天也没找出为啥,求指教
2016年9月 7日 16:20 | # | 引用
celavi 说:
一搜,果然有Compass的。^_^
2016年10月20日 11:49 | # | 引用
anoy 说:
现在有compass的替代品了吗?
2017年7月25日 09:48 | # | 引用
hoist 说:
写得比官方的文档还容易懂,范例也很直观。谢谢老师。
2017年8月29日 00:17 | # | 引用