文件后缀名

Sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。建议使用后缀名为scss的文件，以避免Sass后缀名的严格格式要求报错。

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1
//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
} 

导入

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

被导入sass文件a.scss：

//a.scss
//-------------------------------
body {
  background: #eee;
}

需要导入样式的sass文件b.scss：

@import "reset.css";
@import "a";
p{
background: #0982c1;
}

转译出来的b.css样式：

@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}

根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。

注释

sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。

标准的css注释：

/*
*我是css的标准注释
*设置body内距
*/
body{
  padding:5px;
} 

双斜杆单行注释，单行注释不会输入到CSS中。

//我是双斜杠表示的单行注释
//设置body内距
body{
  padding:5px; //5px
} 

变量

sass的变量必须是 $ 开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。这里不深入介绍，有兴趣可以自行了解！

普通变量：定义之后可以在全局范围内使用。

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}
//css style
//-------------------------------
body{
    font-size:12px;
}

默认变量：sass的默认变量仅需要在值后面加上!default即可。

//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}
//css style
//-------------------------------
body{
    line-height:1.5;
}

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}
//css style
//-------------------------------
body{
    line-height:2;
}

默认变量的价值在进行组件化开发的时候会非常有用。

嵌套

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

选择器嵌套：所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。在选择器嵌套中，可以使用 & 表示父元素选择器。

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;
    &:hover{
      color:#ddd;
    }
  }
}
//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

属性嵌套：所谓属性嵌套指的是有些属性拥有同一个开始单词，如 border-width ， border-color 都是以border开头。拿个官网的实例看下：

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

个人感觉属性嵌套，作用不大……

@mixin

sass中使用 @mixin 声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的 @mixin 通过 @include 来调用。

无参数mixin：

//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}
//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

有参数mixin：

//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

%placeholder

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend ，后面紧跟需要继承的选择器。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

占位选择器%：从sass 3.2.0以后就可以定义占位选择器 % 。

这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。

占位选择器以 % 标识定义，通过 @extend 调用。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}
//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

如上代码，定义了两个占位选择器 %ir 和 %clearfix ，其中 %clearfix 这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

解惑：什么时候用@mixin，什么时候用%placeholder

如果你需要使用变量，最好使用 @mixin ，否则使用 %placeholder 。主要有两个原因：

首先，你不能在一个 %placeholder 中使用变量。其实可以，但你不能将变量传递到 %placeholder 中，所以你不能像 @mixin 一样根据上下文生成特定的CSS。

第二，当不根据上下文传入变量时，在Sass中使用 @mixin ，会使用它们变得更为复杂。简单的说，在Sass中每次重复复制 @mixin ，那他的输出，不仅会造成重复的CSS代码，还会让你的样式文件越来越庞大。

看下面例子：

@mixin center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.container {
  @include center;
}
.image-cover {
  @include center;
}

编译出来的样式：

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

请注意，重复的CSS出来了。如果只有三行重复，这并没有什么危害，但是如果你的 @mixin 不只三行代码，或者在你的项目中重复十几次调用定义的 @mixin ，那么重复的代码有可能就会变成三百行。如果我们使用 %placeholder 来改造这个示例：

%center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.container {
  @extend %center;
}
.image-cover {
  @extend %center;
}

编译出来的样式：

.container, .image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

所以当你知道一些样式永久不变，而且会重复出现多次的时候，你就可以使用 @extend 扩展一个定义好的 %placeholder 。这样可以避免Sass生成重复的代码，让你的样式表更简洁。

条件判断及循环

@if 判断 : @if 可一个条件单独使用，也可以和 @else 结合多条件使用：

//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

@for 循环：for循环有两种形式，分别为：@for $var from start through end 和 @for $var from start to end 。 $i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

//sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

@each 循环 语法为： @each $var in list or map 。其中 $var 表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以 @fuction 开始。sass的官方函数链接为：SASS Fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以 lighten 减淡和 darken 加深为最，其调用方法为 lighten($color,$amount) 和 darken($color,$amount) ，它们的第一个参数都是颜色值，第二个参数都是百分比。

//sass style
//-------------------------------                     
$baseFontSize:  10px !default;
$gray:  #ccc !defualt;        
// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}
body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}
//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}
//css style
//-----------------------------------
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}