众所周知，css并不是一个真正的编程语言，无法做到像其他编程语言进行嵌套、继承以及设置变量。为了解决css存在的不足，开发者开发出一个对css进行预处理的“语言”，这种“语言”能够像编程语言一样使用继承、嵌套和设置变量等操作，然后编译成浏览器能够识别的css语言，这样就弥补了css的不足，所以预处理语言SASS就应用而生了！今天我们就简单了解一下SASS，如果需要详细了解SASS，请查看官方文档。
SASS语法有SASS和SCSS两种，其中SASS的语法比较严格，和css差异比较大，而SCSS比较符合我们写css的习惯。
SASS语法如下：
div
color:#000
SCSS语法如下：
div{color:#000;}
1、安装
sass是基于Ruby语言开发而成，因此安装sass语言提前安装Ruby。我们可以去官网下载Ruby。安装具体流程详见官网。
我主要是使用编译软件koala（下载koala），不需要配置Ruby环境，操作也非常简单。
2、编译
SASS提供四种编译方式
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
koala监听文件或目录，源文件有变动，自动编译。
3、嵌套
选择器嵌套
div {
color:blue;
h1 {
color:red;
}
}
编译后的代码为：
div{color:blue;}
div h1{color:red;}
属性嵌套
div {
h1 {
background:{
color:red;
url(xxx.jpg);
position:0 0;
}
}
}
引用父元素(父元素我们可以用&来代替)
a {
color:#000;
&:hover {
color: #bbb;
}
}
编译后的代码为：
a{color:#000;}
a:hover{color:#bbb;}
4、变量
SASS是可以使用变量，所有变量必须以$开头
$black: #000;
div {
color : $black;
width:860px/500px*100%; //变量计算
}
如果变量需要嵌套在字符串之中，就必须需要写在#{}之中
$top : top;
.border-round {
border-#{$top}-radius: 2px;
}
5、mixin
使用@mixin命令，定义一个代码块
@mixin transform($transform:rotate(45deg)){
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
-o-transform: $transform;
transform: $transform;
}
使用@include命令，调用这个mixin。
div {
@include transform();
}
编译后：
div{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
传参
div {
@include transform(rotate(90deg));
}
6、继承
现有一个class1类
.class1{
position：absolute;
top:0;
left:0;
}
class2要继承class1，就要使用@extend命令
.class2 {
@extend .class1;
font-size:15px;
}
此外，为了减少代码量，提高css加载速度，我们可以通过占位符来继承样式(如“%abc”)，这样就可以防止被渲染到CSS的规则集中。
%test{
color:#fff;
}
.test1{
@extend %test;
}
.test2{
@extend %test;
}
/* 编译后 */
.test1, .test2 {
color: red;
}
8、插入文件
@import命令，用来插入外部文件。
@import "path"和@import "path.scss"都是引入外部文件path.scss
如果插入的是.css文件,只需要@import "foo.css"
如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。
例如，你有一个文件叫做 _font.scss。 这样就不会生成 _font.css 文件了， 而且你还可以这样做：
@import "font"; //不用加下划线
来引入 _font.scss 文件。
9、条件语句
使用@if……@else……
$shadow: 5px;
p{
@if $shadow>10px{
border:none;
}@else {
box-shadow: $shadow $shadow 5px;
}
}
10、循环语句
for循环
@for $i from 1 to 5{ .border-#{$i}{ border:#{$i}px solid #000; }}
编译生成如下:
.border-1 {border: 1px solid #000; }
.border-2 {border: 2px solid #000; }
.border-3 {border: 3px solid #000; }
.border-4 {border: 4px solid #000; }
