一、什么是Sass

Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具，它允许你使用变量、条件语句等，使开发更简单可维护。这里是官方文档。

二、基本语法

 1）变量

 sass的变量名必须是一个$符号开头，后面紧跟变量名。

//sass 样式
$red: #f00;
div {
   color: $red;   
}
// 编译为css后
div {
    color:#f00;   
}

特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号里面，如：

$top: top;
div {
    margin-#{$top}: 10px;       /* margin-top: 10px; */
}

默认变量：仅需在值后面加入 !default即可， 默认变量一般用来设置默认值，当该变量出现另外一个值时，无论定义先后，都会使用另外一个值，覆盖默认值

$color: red;
$color: blue !default;
div {
    color: $color;    /* color:red; */
}

多值变量：多值变量分为list类型和map类型，list有点像js对象中的数组，map类型像js中的对象

list : 可通过空格，逗号或小括号分割多个值，使用 nth($变量名, $索引)取值

//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

// 例子
$px: 10px 20px;
div {
    margin:nth($px, 1) 0 0 nth($px, 2);    /* margin:10px 0 0 20px; */
}

map: 数据以key和value组成，格式：$map: (key1: value1, key2: value2); 通过map-get($map, $key); 

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

2）计算功能

 sass允许使用算式。

div {
    padding: 2px * 4px;
    margin: (10px / 2);
    font-size: 12px + 4px;    
}

　　

3）嵌套

标签嵌套

// sass 样式
div {
    color: #333;
    a {
       font-size:14px; 
       &:hover {
          text-decoration:underline;
       }
    }
} 

// 编译后css
div {
    color: #333;
}
div a {
    font-size:14px; 
}
div a:hover {
    text-decoration:underline;
}

　　属性嵌套：

//sass 样式
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css 编译后样式
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

 4）注释

 sass有两种注释风格

标准css注释： /* 注释 */， 会保留到编译后的文件中，压缩则删除

单行注释： // 注释

在标准注释 /*后面加入一个感叹号，表示重要注释，压缩模式也会保留注释，用于版权声明等。

/*! 重要注释 */

5）继承

sass 中，选择器继承可以让选择器继承另一个选择器的所有样式

// sass样式
h1 {
    font-size:20px;
}
div {
    @extend h1;
    color:red;
}
// css编译后样式
h1 {
    font-size:20px;
}
div {
    font-size:20px;
    color:red;
}

使用占位符选择器 % 

从sass3.2.0后，就可以定义占位选择器%，这个的优势在于，不调用不会有多余的css文件

// sass样式
%h1 {
    font-size:20px;
}
div {
    @extend %h1;
    color:red;
}
// css编译后样式
div {
    font-size:20px;
    color:red;
}

　　

6）混合(mixin)

 sass中使用@mixin声明混合，可以传递参数，参数名义$符号开始，多个参数以逗号分开，如果参数有多组值，那么在变量后面加三个点表示，如： $var...

//sass 样式
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

.opacity{
  @include opacity;      //参数使用默认值  50/100 = 0.5
}
.opacity-80{
  @include opacity(80); //传递参数  80/100 = 0.8
}

//  css编译后样式
.opacity{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

// ---------------------

// 多参数
@mixin center($width, $height) {
    position: absolute;
    left:50%;
    top:50%;
    width:$width;
    height:$height;
    margin:(-$height / 2) 0 0 (-$width / 2);
}
div {
    @include center(200px, 100px);
}
// css编译后样式
div {
    position: absolute;
    left:50%;
    top:50%;
    width:200px;
    height:100px;
    margin:-50px 0 0 -100px;
}

// -------------------

//多组值
@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
div {
    @include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css编译后样式
div {
    -webkit-box-shadow: 0 1px 0 rgba(0