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提供了在线编译。
