sass语法

1.文件后缀名

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

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

2.导入
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则被整合进来了

3.嵌套(Nesting)
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; 
}

当然这只是个属性嵌套的例子，如果实际这样使用，那估计得疯掉