Scss 是Sass的新语法，从外形上看它和CSS长的几乎一模一样。文件名以.scss为扩展名。
一.Sass编译
1.命令编译
（1）单文件编译：
sass <路径>/style.scss:<输出路径>/style.css
（2）多文件编译：
sass sass/:css/
sass文件夹中所有“sass（scss）”文件编译成“.css”文件，并将这些css文件放到项目的css 的文件夹中。
缺点和解决办法
只能一次编译，每次编辑一次.scss文件后，都得重新编译。
解决办法：开启“watch”功能，这样只要你对代码进行修改并保存，都能自动检测代码的变化，并直接编译出来
sass --watch <path1>/style.scss:<path2>/style.css
2.[sass]GUI界面工具编译
[Koala ]
(http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
[CodeKit ]
(http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
3.sass自动化编译
使用Grunt 或Gulp
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不同样式风格的输出方式(4种)
sass 代码：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
1.嵌套输出方式 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
编译命令：
sass --watch test.scss:test.css --style expanded
css输出结果
nav ul {
margin: 0;
padding: 0;
list-style: none;
}//与nested相比后面的大括号另起一行
nav li {
display: inline-block;
}//与nested相比后面的大括号另起一行
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}//与nested相比后面的大括号另起一行
3.紧凑输出方式 compact
编译命令：
sass --watch test.scss:test.css --style compact
结果：
4.压缩输出方式 compressed
编译命令：
sass --watch test.scss:test.css --style compressed
压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格：
三. Sass的调试
在浏览器中直接调试 Sass 文件，找到对应的行数。
四.声明变量
五.普通变量与默认变量
1.如果重复声明不带 !default 的同一个变量，会取最近声明的那个。
$lineHeight: 1;
.line1{
line-height: $lineHeight;
}
$lineHeight: 2;
$lineHeight:1.5 !default;
.line2{
line-height: $lineHeight;
}
编译出来是
.line1 { line-height: 1; }
.line2 { line-height: 2; }
六变量调用
例子：
$width:200px !default;
body{
width:$width;
}
七.局部变量和全局变量
Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近，规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。
全局变量与局部变量
先来看一下代码例子：
//SCSS
$color: orange !default;
//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block { color: $color;//调用全局变量}
em {
$color: red;//定义局部变量
a { color: $color;//调用局部变量 }
}
span { color: $color;//调用全局变量}
css 的结果：
//
CSS.block { color: orange;}em a { color: red;}span { color: orange;}
上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，
全局变量就是定义在元素外面的变量，
如下代码：
$color:orange !default;
$color 就是一个全局变量，而定义在元素内部的变量，比如
$color:red;是一个局部变量。
除此之外，Sass 现在还提供一个 !global 参数。
!global 和 !default 对于定义变量都是很有帮助的。
我们之后将会详细介绍这两个参数的使用以及其功能。
全局变量的影子
当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。
基本上，局部变量只会在局部范围内覆盖全局变量。
上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。
//SCSS
$color: orange !default;//定义全局变量
.block { color: $color;//调用全局变量}
em { $color: red;//定义局部变量（全局变量 $color 的影子）
a { color: $color;//调用局部变量 }}
什么时候声明变量？
我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：
**该值至少重复出现了两次；
**该值至少可能会被更新一次；
**该值所有的表现都与变量有关（非巧合）。
基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。
温馨小提示：您在学习 sass 时，除了在我们网页上可以做练习，还有一个便利在线编辑器网址如下：
http://sassmeister.com/
