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

结果：

Paste_Image.png

4.压缩输出方式 compressed

编译命令：

sass --watch test.scss:test.css --style compressed

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格：

Paste_Image.png

三. Sass的调试

在浏览器中直接调试 Sass 文件，找到对应的行数。

四.声明变量

Paste_Image.png

五.普通变量与默认变量

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/