Sass 基础(一)

　　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;
　　　　}
　　}