本文来自慕课网大漠。
Sass简介
Sass和SCSS区别
1、后缀名不同，很好理解
2、Sass以严格的缩进语法规则书写，不带大括号和分号；而SCSS的语法规则和CSS的语法很类似。
Sass:
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量 body
font: 100% $font-stack
color: $primary-color
SCSS:
$font-stack: Helvetica, sans-serif;
$primary-color: #333; body {
font: 100% $font-stack;
color: $primary-color;
}
编译出来的CSS：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
SCSS写法和CSS没什么区别，所以Sass大家更喜欢（什么鬼？）。简单说就是，你把.css改成.scss也能用。
安装Sass的过程我就省略了。
编译
命令编译
命令行、gulp/grunt、工具
输出方式
嵌套输出方式nested
Sass：
nav {
ul {
margin:;
padding:;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译时戴上参数"--style nested"
sass --watch test.scss:test.css --style nested
编译出来长这样：
nav ul {
margin:;
padding:;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
展开输出方式expanded
编译时加参数 "--style expanded"
sass --watch test.scss:test.css --style expanded
跟nested毛区别都没有，就把闭合大括号另起一行放了。
nav ul {
margin:;
padding:;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
紧凑输出方式compact
编译时加参数 "--style compact"
sass --watch test.scss:test.css --style compact
同样没啥区别，把CSS放在一行
nav ul { margin:; padding:; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
压缩输出方式compressed
编译时加参数 "--style compressed"
这个区别稍微大了点，把注释和空格给去掉了
nav ul{margin:;padding:;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}