注意:目前Compass只能使用PNG格式的图片生成PNG精灵图 1. 精灵图制作 将img/icons/目录下的所有PNG图片生成一张精灵图 {代码...} 仅仅两行代码就可以生成一张精灵图，默认情况下，图片是竖向排列的 2. 为精灵生成CSS @include all-<map>-sprites@include <map>-sprites-<$name> 2.1 all-sprites混合器...

1. 浏览器前缀 $experimental-support-for-xxx {代码...} 2. 圆角 border-radius()混合器 3. 阴影 text-shadow混合器 box-shadow混合器 index.html {代码...} main.scss {代码...} 效果图 4. 颜色渐变 {代码...} 5. @font-face嵌入字体 {代码...}

stretch混合器 有4个参数：$coffset-top $offset-right $offset-bottom $offset-left@include strech(5px, 5px, 5px, 5px)

1. 超链接样式 1.1 导航链接 为链接配色 link-colors(a, :hover, :active, :visited, :focus)混合器 index.html {代码...} main.scss {代码...} hover-link设置悬停样式 hover-link混合器 main.scss {代码...} 1.2 文本中的链接 通过unstyled-link混合器设置隐性链接 index.html {代码...} main.scss {代码...} 2. 列表...

1. 全局样式重置 {代码...} {代码...} {代码...} {代码...} 2. HTML5样式重置 {代码...} {代码...} {代码...} {代码...} 3. Compass文档中其他样式重置 样式重置混合器 作用 reset-box-model 移除元素的内外边距和边框 reset-font 重置文字的字号和基线 reset-focus 移除浏览器提供的轮廓线（比如Safari给<input>...

我目前学习用的是window7系统，因此只介绍windows下的安装。去网址[链接]下载最新版本的Ruby安装程序并运行。按提示安装过程中，在第三个窗口点击选中中间复选框，如图：