CSS
开发网页样式，它不是一种编程语言,没法用它编程。这对程序员来说是很痛苦的，毫无语言规范可言，
借用大牛阮一峰的说法就是：CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
SASS
SASS是一种专门为CSS而服务的编程语言，是CSS的开发工具，通过编程语言进行网页样式设计，然后再编译成正常的CSS文件。
提供了许多便利的写法，可以将CSS代码模块化，分而治之。更好的CSS编码体验。配合gulp，webpack的自动化构建工具来做编译和文件合并。大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
安装与配置
step1：安装Ruby
SASS是依赖于Ruby语言环境的，必须先安装Ruby环境
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。
step2: 通过ruby命令 gem安装sass
安装完ruby之后，在cmd命令行中执行,如下图打开
淘宝RubyGems镜像安装 sass
1 gem sources -a http://gems.ruby-china.org
1 gem sources -l
安装命令
1 gem install sass
升级sass版本的命令行为
1 gem update sass
SASS编译
SASS编译的方式有多种：
1.通过gulp进行集成编译 /kaola(本文不做说明)
2.通过命令行的方式进行编译（本文不做详解）
sass scss目录地址：输出目录地址
如 sass scss/main.scss:style/main.css
SASS命令行工具可以对目录进行自动监视，这样我们的目录下的文件发生了变化，SASS帮助我们自动编译，
将sass scss/main.scss的SASS源码编译到style/main.css文件中去。
sass --watch 监视的目录地址：自动编译的目录地址
通过--watch命令让sass工具自动监视目录，并自动进行编译
sass --watch watchdir:outputdir --style nested|compact|compressed|expended
通过 --style nested(嵌套-默认)|compact(紧促型)|compressed(压缩)|expended(扩展)命令，可以为sass生成css样式指定生成的格式
SASS提供四种编译格式的选项
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
3.通过webstorm开发工具进行编译
setp1:配置环境
Webstorm -> File -> Setting -> Tool -> File Watchers -> 右侧“+” -> SCSS ->ok
setp2:新建一个SCSS文件
结果如下：SCSS文件自动生成CSS文件和MAP关联文件
SASS语法结构
1.嵌套语法使用定义变量
$+变量名 : 值
1 $color : #ffff ;
2 $border : 1px solid red(多值);
2.嵌套语法使用
使用嵌套语法的好处，我们可以去掉样式里面的公共重复的部份,在使用嵌套语法时，
如果使用:hover这种伪类选择器时，嵌套语法会保留空格，我们为元素定义伪类是不能在元素和伪类之间有空格。(ie: a:hover)。
& : 用于引用父类名称 （如: & &-title{} => .nav .nav-title {} ）
这个时候我们就必须使用一个符号 "&:hover" 的方式，直接使用父类名称，不保留空格。可以在属性中使用嵌套:
1 .circle {
2 background-color: red;
3 background-origin: border-box;
4 background-repeat: no-repeat;
5 background-size: cover;
6 }
7 .circle2 {
8 background :{ //注意需要添加 ":" color: #000;
9 origin: border-box;
10 repeat: no-repeat;
11 size: cover;
12 }
13 }
3.@mixin语法
mixin 是一种预先定义好的样式块，我们可以在其它的任何地方重复使用这个样式块。
语法结构:
1 @mixin 名称 （$参数..,$参数）{
2 .......
3 }
4 //使用@include进行mixin的调用
5 @include 名称 ($参数，... ) {
6 .......
7 }
4.@extend 继承语法
我们通过继承来减少重复的定义
1 .mm {
2 background-color: red;
3 a {
4 text-align: center;
5 }
6 }
7 .mm2 {
8 @extend .mm; background-origin: border-box;
9 }
当子类从父类继承后，子类可以继承父类相关的引用 ie: a的嵌套
5.占位符 %placeholder
1 %icon {
2 transition: background-color ease .2s;
3 margin: 0 .5em;
4 }
5 .error-icon {
6 @extend %icon;
7 /*错误图标指定的样式... */
8 }
9 .info-icon { @extend %icon;
10 /* 信息图标指定的样式... */
11 }
6.@import 引入partial样式语法
SASS扩展了@import的功能,
SASS使我们可以在一个CSS文件里面可以引入多个文件,并且编译成一个文件；
因些我们就可以把一个大的css文件，
分为多个 partials (partials 需要以下划线开头 ie: _header.scss),
引入时，我们只需要在文件的头部添加
1 @import "header"
这个时候，header.scss的下划线和扩展名都不需要添加了！@import "header";
7.Interpolation 把一个值插入到别一个值中
#{$变量名} : 用于引用定义的字符串
1 $version:"0.0.1";
2 /* hello test comments #{$version} */
3 $nns : "txt";
4 .nav-#{$nns} {
5 background-size: cover;
6 }
8.SASS 控制语名
1 $theme :"ddd";
2 .testif {
3 @if($theme == light) {
4 background-color: lightblue;
5 } @else if($theme == red){
6 background-color: red;
7 } @else {
8 background-color: black;
9 }
10 }
11 @for $i from 1 through 5 {
12 .col-#{$i} {
13 width:10% *$i;
14 }
15 }
16 @each $var in <list/map>
17 $list: zhangsan lisi wangwu; $map:(red:#dddd) -> map-get($map,key)
18 @each $name in $list {
19 .photo-#{$name}{
20 background: url("#{$name}.jpg");
21 }
22 }
9.SASS 自定义函数
1 $ccs:(light:#ffffff,dark:#000000); //定义function
2 @function getColor($key){
3 @return map_get($ccs,$key);
4 }
5 @mixin aa(){ //调用@function
6 color: getColor(light);
7 }
8 //使用mixin
9 .testff {
10 @include aa()
11 }
敬请留言指正补充交流！！
（未完待续~~）