一、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”。
另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败,在编译过程中都会有具体的说明,大家可以根据编译器提供的错误信息进行对应的修改。