Compass用法指南 - 阮一峰的网络日志
Compass用法指南
几个月前，我介绍了的用法。
Sass是一种"CSS预处理器"，可以让CSS的开发变得简单和可维护。但是，只有搭配，它才能显出真正的威力。
本文介绍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
你会看到，里面有一个文件，这是你的项目的。还有两个子目录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模块。编译后，会生成相应的。
七、CSS3模块
目前，提供19种CSS3命令。在这里，我介绍其中的三种：圆角、透明和行内区块。
（border-radius）的写法是
　　@import "compass/css3";
　　.rounded {
　　　　@include border-radius(5px);
上面的@include命令，表示调用某个mixin（类似于C语言的宏），5px是参数，这里用来指定圆角的半径。
编译后的代码为
　　.rounded {
　　　　-moz-border-radius: 5
　　　　-webkit-border-radius: 5
　　　　-o-border-radius: 5
　　　　-ms-border-radius: 5
　　　　-khtml-border-radius: 5
　　　　border-radius: 5
如果只需要左上角为圆角，写法为
　　@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);
7.3 行内区块
（inline-block）的写法为
　　@import "compass/css3";
　　#inline-block {
　　　　@include inline-
编译后生成
　　#inline-block {
　　　　display: -moz-inline-
　　　　display: inline-
　　　　vertical-align:
　　　　*vertical-align:
　　　　zoom: 1;
　　　　*display:
八、layout模块
提供布局功能。
比如，指定页面的部分总是出现在浏览器最底端：
　　@import "compass/layout";
　　#footer {
　　　　@include sticky-footer(54px);
又比如，指定子元素父元素的空间：
　　@import "compass/layout";
　　#stretch-full {
九、typography模块
提供版式功能。
比如，指定的mixin为：
　　link-colors($normal, $hover, $active, $visited, $focus);
使用时写成：
　　@import "compass/typography";
　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
十、utilities模块
提供某些不属于其他模块的功能。
　　import "compass/utilities/";
　　.clearfix {
再比如，：
　　@import "compass/utilities";
　　table {
　　　　@include table-
编译后生成
　　table th {
　　　　text-align:
　　　　font-weight:
　　table td,
　　table th {
　　　　padding: 2
　　table td.numeric,
　　table th.numeric {
　　　　text-align:
十一、Helper函数
除了模块，Compass还提供一系列。
有些函数非常有用，比如和返回图片的宽和高。
再比如，可以将图片转为data协议的数据。
　　@import "compass";
　　.icon { background-image: inline-image("icon.png");}
编译后得到
　　.icon { background-image: url('data:image/base64,iBROR...QmCC');}
函数与mixin的主要区别是，不需要使用@include命令，可以直接调用。
跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。
上一篇文章，我摘录了《程序员的呐喊》。这本书有趣的内容太多，今天再摘录一段。
最近，我在阅读 Steve Yegg 的文集《程序员的呐喊》。
软件架构（software architecture）就是软件的基本结构。&&&&Android E-compass
sensor 传感器
&Android E-compass
sensor 传感器
Advanced Android Development about E-compass using Advanced Canvas drawing
ListView获取SensorList
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
移动开发下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
Android E-compass
sensor 传感器
所需积分：10
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
Android E-compass
sensor 传感器
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员Compass CSS3
The CSS3 module provides cross-browser mixins for CSS properties
introduced in CSS3, for example
What rendering engines you support for the experimental css properties is governed by
the configurable variables defined in .
This file can be imported using:
@import "compass/css3"
– Specify the CSS3 animation property and all its sub-properties.
– Specify the CSS3 appearance property.
– Specify the background clip for all browsers.
– Specify the background origin for all browsers.
– Specify the background size for all browsers.
– Specify the border radius for all browsers.
– Specify the box shadow for all browsers.
– Specify the box sizing for all browsers.
– Specify a columnar layout for all browsers.
– Specify the (image) filter for all browsers.
– This module provides mixins that pertain to CSS3 Flexbox.
– Specify a downloadable font face for all browsers.
– Mixin for breaking space and injecting hypens into overflowing text
– Specify linear gradients and radial gradients for many browsers.
– Declare an element inline block for all browsers.
– Specify the opacity for all browsers.
– Specify CSS Regions for supported browsers.
– Specify the text shadow for all browsers.
– Specify transformations for many browsers.
– Specify a style transition for all browsers.
– Declare an element inline block for all browsers.
Christopher M.Eppstein
Compass is Charityware -
Help the UMDF:
Problem with this page?为了账号安全，请及时绑定邮箱和手机
compass sprite命令怎么没有产生sprites文件夹？？？？
急求老师回答
写下你的评论...
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2