SASS是最早的CSS预处理语言，有比LESS更为强大的功能，不过其一开始的缩进式语法并不能为大众接受，不过由于强大的功能，还是有很多开发者选择了SASS。

SASS是采用了Ruby语言编写的一款CSS预处理语言，(不用担心，我们并不用学习Ruby也可以使用全部功能）诞生于2007年，最初是为了配合HAML(缩进式HTML预编译器)而设计。

缩进式风格可以缩减代码量，强制代码风格，但不为大多数程序员接受，而且无法兼容已有的CSS代码，这也是SASS出现早，但是没有LESS普及广的原因之一。

但是SASS三代开始，SASS开始迎合程序员的使用习惯，放弃缩进式，以及完全兼容普通的CSS代码，这一代的SASS也称之为SCSS。 相比LESS，SASS功能更加强大。

sass有两种后缀名文件：

一种后缀名为sass，不使用大括号和分号；

另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。

语法区别：

文件后缀名为sass的语法:

body  background: #eee font-size:12px pbackground: #0982c1

文件后缀名为scss的语法:

body {background: #eee;font-size:12px;
}
p{background: #0982c1;
}

基本使用：

变量的使用这里使用 $ 号开头
(这一块和LESS区别不大，所以做个简单的实验)

  <div id="main"></div>

main.scss---注意后缀名

$color:red;
div{background-color: $color;height: 200px;width: 200px;
}

执行编译(考拉最新版---查看软件中sass的3.3.7)

计算，和less一样,也不支持减法

$number:10px;
$heidth:$number+190;
$width:$number*20;div{background-color: red;height: $heidth;width: $width;
}

支持@IMPORT导入

在CSS中

1、@IMPORT URL（WODE.CSS）机制是不同于LINK的，LINK是在加载页面前把CSS加载完毕，而@IMPORT URL（）则是读取完文件后在加载，所以会出现一开始没有CSS样式，闪烁一下出现样式后的页面(网速慢的情况下)。

2、@IMPORT 是CSS2里面的，所以古老的IE5不支持。

3、当使用JAVASCRIPT控制DOM去改变样式的时候，只能使用LINK标签，因为@IMPORT不是DOM可以控制的。

注意：@IMPORT先加载HTML加载CSS；

LINK先加载CSS加载HTML。

@import的小毛病

如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

实验main.css main1.css mian.scss

页面文件:

<div id="main"></div>
main.scss
@import "main1.css";main1.css
div {background-color: red;height: 200px;width: 200px;
}

@extend 继承

很多编程语言中都有继承这个概念(非常酷的概念可以大大节约代码量);

#div{width: 200px;height: 200px;
}#main{  @extend #div;background-color: red;
}
#message{@extend #div;background-color: gray;
}

编译之后：

#div, #main, #message {width: 200px;height: 200px; }#main {background-color: red; }#message {background-color: gray; }

@mixin 混入

这里跟less有一定的区别：

@mixin  div{width: 200px;height: 200px;
}
#main{@include div;
}
#message{
@include div;
}

——注意这里声明的部位和之前有点区别；

——引用也有区别，这样用关键字是比less麻烦了还是更清晰呢

嵌套

这一块和less没什么区别：

<div id="main"><p>文章类容</p><div id="message">hello world</div></div>#main{width: 200px;height: 200px;background-color: grey;p{color: red;font-size: 14px}#message{width: 50px;height: 50px;background-color: blanchedalmond;}
}

@function

方法的编写和js函数一样，选择使用

实验： 页面有三个div被一个大div包含，要求用sass编写

<div id="main"><div class="one"></div><div class="two"></div><div class="three"></div></div>@function setSize($size){@return $size
}
@mixin div-init{position: absolute;
}
$size:200px;
#main{height: setSize($size)*2;width: setSize($size)*2;background-color: grey;@include div-init;.one{height: setSize($size);width: setSize($size);background-color: red;@include div-init;}.two{height: setSize($size)-100;width: setSize($size)-100;background-color: blue;@include div-init;}.two{height: setSize($size)/2;width: setSize($size)/2;background-color: yellow;@include div-init;}
}