css 是一些非常简单得语句的组合，既然简单的语句，就不可避免的有很多重复的，冗余的东西，而且没有传统
编程语言变量，控制语句等高级特性，所以造成了css 编写低效，往往需要查找替换，大量复制来修改或者编写。Sass 是用
弥补这些缺陷的，使开发更加的方便快捷，更加方便管理。
1.Sass和SCSS的区别。
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，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;
}
在使用的页面时依然引用.css文件。
Sass中编译出来的样式风格可以按不同的样式风格显示。
1.嵌套输出方式nested
例如： nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格：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
例如： nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
3.紧凑输出方式 compact
例如： nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格：
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
4.压缩输出方式compressed
例如： nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;
text-decoration:none}
声明变量用“$”开头，
$width:300px;
"$":变量声明符
width: 变量名称
300px 变量值
全局变量与局部变量
在选择器、函数、混合宏...的外面定义的变量为全局变量
例如：
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}
编译后：
//CSS
.block {
color: orange;
}
em a {
color: red;
}
span {
color: orange;
}
$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。
什么时候声明变量？
1.该值至少重复出现了两次；
2.该值至少可能会被更新一次；
3.该值所有的表现都与变量有关（非巧合）。
Sass 的嵌套分为三种：
选择器嵌套
属性嵌套
伪类嵌套
例如：在css 会这样写
nav a {
color:red;
}
header nav a {
color:green;
}
在sass中
nav {
a {
color: red;
header & {
color:green;
}
嵌套-属性嵌套
Sass中提供属性嵌套，css有一些属性前缀相同。
例如用到的样式：
.box{
border-top:1px solid red;
border-bottom:1px solid green;
}
在Sass中我们可以这样写：
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
