4：sass的编译

把sass文件转化为css文件，就是sass的编译

Sass的编译：

• 命令编译
• GUI工具编译
• 自动化编译
• 编辑器编译
• 在线编译

1：命令编译

在终端通过sass指令；来编译sass

单文件编译

sass sass/style.sass:css/style.css

会在当前目录形成文件夹.sass-cache,里面有一个有由SHA1计算出来的值命名的文件夹，里面有一个文件style.scssc
在目标文件夹形成style.css以及style.css.map文件

style.sass:

$width:100px;
$height:50px;
$color:#f00;

.box{
width: $width;
height: $height;
color: $color;
}

style.css

.box {
width: 100px;
height: 50px;
color: #f00; }

/*# sourceMappingURL=style.css.map */

style.css.map

{
"version": 3,
"mappings": "AAIA,IAAI;EACF,KAAK,EALA,KAAK;EAMV,MAAM,EALA,IAAI;EAMV,KAAK,EALA,IAAI",
"sources": ["../dist/style.scss"],
"names": [],
"file": "style.css"
}

多文件编译

sass sass/:css/

开启watch功能，只要代码有修改，就会自动检测代码的改变，自动进行编译

文件监听

sass --watch sass/style.sass:css/style.css

文件夹监听

sass --watch sass:css

css转化为scss

sass-convert style.css style.scss

编译方式--style

sass --watch style.scss:style.css --style nested|expanded|compact|compressed
nested :嵌套缩进的css的代码，默认值
expanded:没有缩进的、扩展的css代码
compact:简洁格式的css代码
compressed:压缩后的css代码

sacc文件

header{
width:100%;
height:50px;
line-height: 50px;
font-size: 16px;
color: #000;
}
section{
width:100%;
height:auto;
font-size: 14px;
color: #999;
}
footer{
width:100%;
height:40px;
line-height: 40px;
font-size: 12px;
color: #666;
}

nested:

header {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 16px;
color: #000; }

section {
width: 100%;
height: auto;
font-size: 14px;
color: #999; }

footer {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 12px;
color: #666; }

expanded:

header {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 16px;
color: #000;
}

section {
width: 100%;
height: auto;
font-size: 14px;
color: #999;
}

footer {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 12px;
color: #666;
}

compact:

header { width: 100%; height: 50px; line-height: 50px; font-size: 16px; color: #000; }

section { width: 100%; height: auto; font-size: 14px; color: #999; }

footer { width: 100%; height: 40px; line-height: 40px; font-size: 12px; color: #666; }

compressed:

header{width:100%;height:50px;line-height:50px;font-size:16px;color:#000}section{width:100%;height:auto;font-size:14px;color:#999}footer{width:100%;height:40px;line-height:40px;font-size:12px;color:#666}

开启sourcmap调试：--sourcemsp，会生成一个.css.map文件，默认开启

开启debug模式：--debug-info

2：GUI界面工具编译

工具：Koala、Compass.app、Scout、Codekit
推荐：Koala、Codekit

3：自动化编译

自动化工具：gulp、grunt

Grunt配置Sass编译的示例代码

module.exports = function(){
grunt.initConfig({
pkg:grunt.file.readJSON("package.json"),
sass:{
dist:{
files:{
"style.css":"style.scss"
}
}
},
watch:{
css:{
files:"**/*.scss",
tasks:["scss"]
}
}
});
grunt.loadNpmTasks("grunt-contrib-sass");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTasks("default",["watch"]);

}

Gulp配置Sass编译的示例代码

var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass",function(){
gulp.src("./style.scss")
.pipe(sass())
.pipe(gulp.dest("./css"))
})
gulp.task("watch",function(){
gulp.watch("scss/*.scss",["sass"])
})
gulp.task("default",["sass","watch"]);

4：编辑器编译

webstorm自动保存即编译

前提：在命令终端：sass --watch sass/style.sass:css/style.css
启动WebStorm，打开已有项目，创建一个scss文件。
这是在右上角会显示Add Watcher按钮，点击它，在弹出的对话框中，将Program的路径设为Ruby中scss.bat的路径。C:\Ruby22\bin\sass.bat
现在在我们修改scss文件的时候，webstorm会为我们自动生成对应的css文件。
会在当前目录生成css文件和map文件

5：在线编译

sassmeister提供了在线编译。

常见的编译错误：字符utf-8、中文字符