Sass&Compass快速入门总结

什么是Sass?

Sass是CSS预处理器的一种，其他还有less，stylus。他们的作用相同，但是语法，功能上略有差异，经过了解。我发现less相对来说更易上手，但我还是选择了功能更为强大，语法种类更多的sass。
Sass在早期使用缩进，无法兼容已有的CSS代码，同时这种缩进风格也跟CSS的默认习惯不同，所以虽然sass出现的早，却没有less普及。
后来推出了SCSS。其实他还是Sass，Sass以.sass后缀为扩展名，SCSS以.scss后缀为扩展名。Sass不支持大括号{}，使用严格的缩进。而SCSS的语法跟css的语法非常类似。
例子：
Sass语法：

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS语法：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出的CSS：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

如何使用

配置

Sass是用Ruby语言写的，所以要先有Ruby环境，再安装sass。
首先安装Ruby，然后在Ruby中输入：

//最近的compass已经集成sass，不用单独安装sass
gem install compass
//然后输入下边指令看看是否成功安装了compass和sass
gem list
//若sass没安装，再手动安装一下
gem install sass

别着急，耐心等待安装完成即可使用。
Sass文件就是普通的文本文件，扩展名改为.sass即可。当然我们还是推荐改为.scss。这样语法更符合css的习惯。
编辑的时候可以使用Sublime Text编辑器，安装Sass插件，能够进行代码提示。

使用Sass控制

打开Ruby，输入命令进入指定文件夹，例如：

E:
cd sass

进入E盘的sass文件夹。
文件夹中的.sass文件和.scss文件可以相互转换，例如：
一些常用操作命令：

//.sass文件和.scss文件可以相互转换
sass-convert a.sass b.scss
//将sass文件编译成css文件
sass demo.scss product.css
//还可以设置css的输出风格
sass --style compressed test.scss test.css
//输出样式的风格可以有四种选择，默认为nested
//nested：嵌套缩进的css代码
//expanded：展开的多行css代码
//compact：简洁格式的css代码
//compressed：压缩后的css代码

最重要最常用的，监听命令，这样编辑sass之后只要保存，就会实时刷新css：

//watch单个文件
sass --watch test.scss:test.css
//watch文件夹   这句还没理解？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
sass --watch app/sass:public/stylesheets

使用compass控制

安装compass后，在Ruby中输入：

//首先找到要创建项目的位置
E:
cd project
//创建项目
compass create myproject
//进入项目文件夹
cd myproject
//若已经有scss文件，放入项目文件夹中的sass文件夹
//使用下边的命令，编译出css。该项目在根目录下运行，会编译所有sass文件夹中的sass文件，并放入stylesheets文件夹中
compass compile
//默认状态下编译出的css文件带有大量的注释。但生产环境中需要压缩的css文件，此时使用：
compass compile --output-style compressed
//compass只编译发生变动的sass文件，若要重新编译未改动的文件，则：
compass compile --force
//除了命令行，还可以在新建项目中的配置文件config.rb中指定编译模式。:expanded模式表示编译后保留原格式，其他值还包括:nested、:compact和:compressed。进入生产阶段后，就要改为:compressed模式。
output_style = :expanded
//除了上边的一次性编译，还可以设置监视自动编译：
compass watch
//这样只要sass文件发生变化，css就实时刷新。

compass的优势

1.reset

//reset
@import "compass/reset"; 

2.常见css的集成

//常见的css3
@import "compass/css3"; 
//圆角
.rounded{ 
    @include border-radius(5px);
    @include border-corner-radius(top, left, 5px);
 }
 //透明度 
#opacity{
    @include opacity(0.5); 
}
//行内区块
#inline-block {
　　　@include inline-block;
}

只要先import “compass/css3”, 之後就可以使用所有css3 的內容，如border-radius、box-shadow、gradient…等，使用方式是@include，其实是compass帮你写好了@mixin，你只要会用就好，而compass厉害的就是会同时帮你产生各個浏览器相对应的css，上面那行所产生的結果：

.rounded{
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    -o-border-radius: 5px;  
    -ms-border-radius: 5px; 
    -khtml-border-radius: 5px;  
    border-radius: 5px;
} 
#opacity{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
　　 opacity: 0.5;
}
#inline-block {
　　　　display: -moz-inline-stack;
　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　*vertical-align: auto;
　　　　zoom: 1;
　　　　*display: inline;
}

3.自动生成雪碧图
在compass新建的项目目录下，新建images文件夹。
在images文件夹中新建一个文件夹用于放置要合成的图片，例如mypic文件夹。
在项目的sass文件夹下新建一个mypic.scss文件。在其中输入：

@charset "UTF-8";

@import "compass/utilities/sprites";  // 加载compass sprites模块
@import "mypic/*.png";                // 导入share目录下所有png图片
@include all-mypic-sprites;           //在css中显示每个图的坐标

然后在Ruby中执行：

compass watch

就能看到在images文件夹中生成了一个雪碧图。如果报错，注意一下图片文件的格式，雪碧图只支持png格式的文件，其他格式的文件可以在这里转换格式。不能直接修改扩展名，会报错。

之后，在stylesheets中生成了一个mypic.css文件，里边就有雪碧图中图片的坐标了。

注意：如果在mypic中增删了图片，要更改一下mypic.scss文件（例如去掉分号，保存，再加上分号，保存。），compass才能监听到变化。此时会重新读取mypic文件夹中的图片，删除原来的雪碧图，生成新的雪碧图，并且更新mypic.css文件。
另外，增删图片会引起一部分没变的图片的坐标发生改变。但类名不变，所以在使用过程中增删图片并不会影响已经写好的其他没变化的图片，可以放心使用，非常方便。