标签：
1、 sass对语法缩进很敏感，用缩进代替{}，用换行代替;，scss是css3的超集，语法和css相似。如果是使用Python或者Ruby,选择空格敏感的原封缩进式语法会比较合适。
2、 变量名以$开头，可以包括-和_
3、 混合器能够在手写的样式表中有效地避免重复。但是，因为规则都混入到其他类
中，所以在输出的样式表中不能完全避免重复
4、
Compass由三个主要部分组成：混合器和实用工具的类库，能够集成到应用开发环境中的开
发系统，以及一个用于构建框架和扩展的平台。
5、 sass可以使用子选择器（>）、同层选择器（+、~）
6、 嵌套属性的话，根据-分解开属性名，跟属性要加：
7、 局部文件命名的时候以_开头，使用@import导入的时候，可以省略_和后缀名（.scss .sass）,
@import可以放在CSS规则内，也可以放在CSS规则外面
8、 静默注释:// 不会出现在css代码中
标准注释: /* */,会出现在在css代码中，但是当注释放在css不允许出现的地方的时候，注释就不会出现
9、 继承最好不要使用后代选择器（比如.foo .bar）去继承CSS规则
10、 gzip压缩能让样式表压缩得更小
11、 优化前端性能的最佳方式是尽可能缩小资源的网络复写
12、在媒体查询中不能使用@extend
13、 自定义函数 @function
@function指令和@mixin非常类似，不同之处在于@function包含的内容较少，每个@function必须返回一个结果，使用@return返回
14、 配置图片的路径：
在config.rb里面修改：http_path = "/",将其配置成自己需要的路径，
然后在sass中调用的时候，只要输入图片的名称就可以了，比如：
background: image-url("5.jpg")；
注意：
(1) 使用跟路径的话，需要在服务器上使用，在config.rb中
http_path = http://127.0.0.1:8020/test1/
(2) 如果使用相对路径的话
http_path = "/"
relative_assets = true
15、 图片精灵（目前只能使用png格式的）
@import "compass/utilities/sprites";
@import "icon/*.png"; // img里面新建一个名字为icon的文件夹
@include all-icon-sprites; // 导出所有图片精灵里面的图片（sprite要加s）
.add-button { // 单个图片
@include icon-sprite(ic_next); // 不要all，sprite不加s
}
16、 链接访问
@import "compass/typography";
a{
@include link-colors(#333,
$hover: #00f,
$active: #f00,
$visited: #555,
$focus: #f00);
}
17、给列表加上项目符号
ul {
@include pretty-bullets(
‘ic_next.png‘,
$line-height: 18px,
$padding: 14px);
}
18、将文本装换为图片
h1 {
// 设置高是因为背景图片没法撑开高度，如果图片比较大的话，会有部分图片被裁减
// 设置宽是因为没设置的话，图片的宽度就是父元素的宽度
width: 300px;
height: 100px;
@include replace-text(‘logo.jpg‘);
}
19、渐变
@include background(linear-gradient(360deg, #ccc, #cdf));
但是一开始会生成一长串url的代码，这是一个SVG，生成的代码如下：
标签：
原文地址：http://www.cnblogs.com/qzccl/p/5561663.html
