sass的基本使用

1. 变量：使用 $ 符号开头，在SASS中定义的变量，除了可以在样式中直接引用之外，还可以对变量进行一些基本的数学运算，而且还可以在一些有用函数中引用。

   $color:#000;
   
   body{
   color:$color;
   background-color:#fff;
   }

   适用情况：定义主题皮肤等

2. 嵌套

   • 选择器嵌套
     SASS中选择器的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承。比如说，我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除百给特定的元素添加类名class或者ID。

     section { 
         margin: 10px; 
         nav { 
             height: 25px; 
             a { 
                 color: #0982c1; 
                 &:hover{ 
                     text-decoration: underline; }}}
     

   • 样式嵌套

     li { 
         font: {
                 style:italic; 
                 family:serif;
                 weight:bold; 
                 size:1.2em; 
                 } 
         }

3. Mixins
   Mixins是SASS中最强大的特性之一，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时在写样式时肯定碰到过，某段CSS样式经常要用到多个元素中，这样就需要重复的写多次。在SASS中，可以为这些公用的CSS样式定义一个Mixin，然后在CSS需要使用这些样式的地方直接调用定义好的Mixin。这是一个非常有用的特性，Mixins被作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

   • 定义

     @mixin Mixins名 
     { /*样式规则*/ }
     //还可传参
     @mixin Mixins名（$参数名：参数值）
     { /*样式规则*/ }

     @mixin error($borderWidth:2px)
     {
         border: $borderWidth solid #f00; 
     }

     选择器{
         @include(Mixins名)；
     }
     
     .generic-error { 
         @include error();/*直接调用error Mixins*/ 
     }
     .login-error { 
     @include error(3px);
     /*调用error Mixins，并将$borderWidth参数重定义为3px*/
     }

4. 选择器继承
   在SASS的继承是把一个选择器的所有样式继承到另一个选择器上，在继承另一个选择器的样式时需要使用@extend开始，后面紧跟被继承的选择器：

       ```
       选择器 {
           @extend 定义的类
       }
       ```
   
       ```
       /*定义一个类*/ 
       .block { 
           margin: 10px 5px; 
           padding:2px; 
       }
       p { 
           @extend .block;/*继承.block选择器下所有样式*/ 
           } 
       ul,ol { 
           @extend .block;/*继承.block选择器下所有样式*/ 
           color:#333; 
           text-transform: uppercase; 
           }
       ```
   

   如果block类用不上，可以适用%block替换.block，生成的css会干净很多

参考：http://www.w3cplus.com/preprocessor/sass-basic-syntax-and-features.html