Sass入门：第二章
1.Sass语法格式
假设有这样一段CSS代码：
body{
font : 100% Helvetica , sans-serif;
color : #333;
}
Sass最初的语法格式
$font-stack : Helvetica , sans-serif
$primary-color : #333
body
font : 100% $font-stack
color : $primary-color
这种语法格式没有CSS中常见的大括号和分号，容易出错。
而SCSS的语法格式
$font-stack : Helvetica , sans-serif;
$primary-color : #333;
body{
font : 100% $font-stack;
color : $primary-color;
}
SCSS比Sass更接近CSS。
2.Sass编译
使用Sass进行开发，项目中还是引用".css"文件，Sass只是一个预处理工具，只有在需要的时候，才有效。
Sass编译有多种方法：
▶命令编译
▶GUI工具编译
▶自动化编译
3.命令编译
指使用电脑中的命令终端，通过输入Sass指令来编译Sass。这种编译方式是最直接也是最简单的一种。
▶单文件编译：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
▶多文件编译：
sass sass/:css/
上面的命令表示将项目中"sass"文件夹中所有".scss"文件编译成".css"文件，并且将这些CSS文件都放在项目中"css"文件夹中。
▶缺点
在实际的编译过程中，上面的命令只能一次性编译。每次保存".scss"文件之后，都要重新执行一次这样的命令。解决的方法是在编译Sass时，开启"watch"功能，这样只要你的代码进行任何修改都能自动监听到代码的变化，并且编译出来。
sass --watch <要编译的Sass文件路径> / style.scss : <要输出的CSS文件路径> / style.css
例如：假设要把项目中的"bootstrap.scss"编译出"bootstrap.css"文件，并且将编译出来的文件放在"css"文件夹中，可以在命令终端中执行:
sass --watch
sass / bootstrap.scss : css / bootstrap.css
一旦bootstrap.scss文件有任何修改，只要重新保存了修改的文件，命令终端就能监听。
4.GUI界面工具编译
对于 GUI 界面编译工具，目前较为流行的主要有：
▶Koala (http://koala-app.com/)
▶Compass.app（http://compass.kkbox.com/）
▶Scout（http://mhs.github.io/scout-app/）
▶CodeKit（https://incident57.com/codekit/index.html）
▶Prepros（https://prepros.io/）
相比之下，推荐使用以下两个：
▶Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
▶CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
5.自动化编译
▶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']);
}
▶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']);
6.常见编译错误
▶字符编译错误：在Sass编译的过程中，需要将文件编码设置为"utf-8".
▶路径中午字符错误：建议在项目中文件命名或者文件目录命名不要使用中文字符。
7.不同风格样式输出
Sass中编译的风格主要包括以下几种：
▶嵌套输出方式 nested
▶展开输出方式 expanded
▶紧凑输出方式 compact
▶压缩输出方式 compressed
例如：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
(1)嵌套输出方式 nested
在编译的时候带上参数 " --style nested ":
sass --watch test.scss:test.css --style nested
编译出来的CSS样式风格：
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
(2)展开输出方式 expanded:
在编译的时候带上参数 " --style expanded":
sass --watch test.scss:test.css --style expanded
编译出来的CSS样式风格：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
这个输出的CSS样式风格和nested类似，只是大括号另起一行。
(3)紧凑输出方式 compact：
在编译的时候带上参数 " --style compact ":
sass --watch test.scss:test.css --style compact
编译后的CSS样式：
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
适合喜欢单行CSS样式格式的朋友。
(4)压缩输出方式 compressed
在编译的时候带上参数 " --style compressed ":
sass --watch test.scss:test.css --style compressed
编译出来的CSS样式风格：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
压缩输出方式会去掉标准的Sass和CSS注释以及空格。
9.Sass调试
只要浏览器支持 "sourcemap" 功能就可以直接在浏览器中调试Sass文件。早一点的版本，需要在编译的时候添加 " --sourcemap "参数：
sass --watch --scss --sourcemap
style.scss : style.css
在Sass3.3版本之上，不需要添加这个参数：
sass --watch style.scss : style.css
在命令终端，你将看到一个信息：
>>> Change detected to: style.scss
write style.css
write style.css.map
就可以直接在浏览器调试Sass文件。
