cmd下 dir可查看文件夹目录 rd 删除文件夹 md 新建文件夹
images文件夹要和config里的配置相吻合
config里的relative_assets = true 取消注释 就会使用相对路径
创建compass
项目目录下 compass create name
叹号 " ! "
require 'compass/import-once/activate' 如果多次引用一个文件 只插入一次
如果需要多次引入 在后面加上叹号即可 require ' compass-normalize! '
confing.rb 文件output_style 设置为 :compressed 的时候，可以在注释前加！让他在编译的时候不被压缩
/*! ... */ //双斜线的注释本身就不会打包到css文件中
引入模块
使用@impot "compass"，就默认包含了其他的5大模块 layout和reset需要明确指定引入
layout 提升页面布局的控制能力
reset 重置
normalize模块
gem install compass-normalize 使用compass的normalize插件
npm install normalize.css 安装normalize包
安装好之后再config文件中 require ' compass-normalize ' 引入即可
包含base，html5，links，typography，embeds，groups，forms，tables 等8个子模块
通过@import "normalize/base" 这样的子路径引入
如果只引入子模块，需要同时引入 "normalize-version" 模块
reset模块
layout模块
layout / stretching
@include stretch(); 占满整个父元素 ，设置为absolute，上右下左都为0，可加参数为上右下左到页面的距离
@include stretch-x(); @include stretch-y();
layout / sticky-footer
@include sticky-footer() 让footer处于页面底部（如果内容高度不够就为窗口底部）
css3模块
@include box-shadow(1px 1px 1px 1px #ccc) 盒子阴影
typography模块
typography / links
@include hover-link; 去除下划线。光标移动上去后和获取焦点后 显示下划线
@include link-colors('normal','hover','active','visited','focus'); 第一个为必选参数
@include unstyled-link; 抹平超链接样式 和文本一样
typography / lists
@include no-bullets; 去除自己的list-style和下面li的list-style和margin-left
@include no-bullet; 没有“s”，去除单个li的list-style样式
@include pretty-bullets() 将自定义图片设置为list-style样式
@include inline-list; 去除本身的list-style，和里面li元素的margin，padding； 然后display设置为inline
@include horizontal-list('padding','float'); 本身margin，padding设置为0，overflow为hidden，里面li去除样式然后float：left，有4px的padding-lfet和right
@include horizontal-list(false,right); 填false就是不需要padding，否则是设置padding为0，不支持ie8；
@include inline-block-list('padding'); 本身margin，padding设置为0，overflow为hidden，里面li去除样式然后设置为inline-block 不需要padding可以不写
typography / text
@include force-wrap; 强制换行
@include ellipsis; 不换行，多余部分用省略号表示
@include hide-text; 将里面文字隐藏 text-indent方式
@include squish-text; 将里面文字隐藏 fontsize为0，颜色透明方式
@include replace-text( ' https：//url '，'background-position-x'，'background-position-y' ) 将图片替换成背景
@include replace-text-with-dimensions('url') 自动计算本地图片的宽高 不会有背景色漏出
typography / vertical_rhythm
垂直韵律
helpers模块
函数 不是mixin 不用添加@include 直接调用
background-image:inline-image('config里image配置的文件夹里的图片的url') 减少链接数 将图片转成base64编码形式放在css文件里随css进行返回
background-image:image-url('config里image配置的文件夹里的图片的url') 自动生成cache buster（路径后面添加？和一串数字） 解决缓存问题
@include font-face（） 字体 不用写format那些
Utitilities模块
Utitilities / gennral
@include clearfix(); 设置overflow：hidden来清除浮动
@include pie-clearfix(); 使用伪类方式清除浮动
@include legacy-pie-clearfix();
Utitilities / sprites
在images下创建一个logo文件夹 新建一个_icons.scss的文件 里面放入以下代码 （在原scss文件中要用@import引入）
@import "compass/utilities/sprites";
$logo-sprite-dimensions:true; // 生成的时候会同时给logo-a这个类加上宽高 数值为图片的宽高
@import " logo/*.png";
假设是items/logo/*.png 也是取最后一个值 也就是logo作为mixin 然后调用
@include all-logo-sprites();
就会生成一个精灵图 使用.logo-图片名 引用 比如 logo-a
其他类名通过 @include logo-sprite("a") 来调用 括号内为图片名
a.png a_hover.png a_active.png 图片使用另外两个类名命名的时候 compass会自动在hover和active状态下 更改图片
$disable-magic-sprite-selectors:true 可以关闭这一特性