一、Sass安装（windows版）：
1.Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本
2.建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况）
3.Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板。
4.接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。
方法1：打开电脑的命令终端，输入下面的命令gem install sass
方法2：通过 Compass 来安装 Sass
方法3：本地安装 Sass
其他方法
5.命令终端输入sass -v即可查看是否安装成功
6.更新 Sass 命令终端输入 gem update sass
二、卸载（删除）Sass
1.gem uninstall sass 这样就卸载了 Sass ，但这行命令基本上是使用不上。
三、sass的语法格式
Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。
注：这种语法格式对于前端人员都不太容易接受，而且容易出错。
so
SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。
注意：不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展名不同。
一般都喜欢用新的语法规则，即SCSS，“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。
四、编译
注意：在项目中还是引用“.css”文件 另外新建sass文件夹装.scss文件
1.命令编译:
单文件编译:
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
多文件编译：
sass sass/:css/ 表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。
缺点及解决方法：
在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
例如：sass --watch sass/bootstrap.scss:css/bootstrap.css
2、GUI 界面工具编译 推荐
（1）Koala (http://koala-app.com/) (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
（2）CodeKit（https://incident57.com/codekit/index.html）(http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
3、自动化编译
（1）Grunt 配置 Sass 编译的示例代码
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'style/style.css' : 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'] }
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
（2）Gulp 配置 Sass 编译的示例代码
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
. pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass','watch']);
五、常见的编译错误
最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。
另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。
网友评论