SASS

sass有两种后缀名文件：

一种后缀名为sass，不使用大括号和分号；

另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。

建议使用：scss

sass的导入

  导入文件需要加后缀名。css

  如果不加后缀名，sass会默认为sass文件

选择器嵌套

    #top_nav{

       line-height: 40px;

         text-transform: capitalize;

         background-color:#333;

      li{

           float:left;

         }

       }

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开.

在变量值后面加上!global即为全局变量。

全局变量

        

  文件的所有函数都可以用

局部变量

   只能在申明的函数里面可以用，外部不能使用

less是按需求加载（顺序没有关系）

scss是从上往下执行（必须定义在引用的上面）

  

less

  局部变量，只能在局部内能够使用，不影响全局变量。

scss

   局部变量，在全局也能使用。并影响定义全局的变量。

    $fontSize: 12px;

    body{

    $fontSize: 14px;        

    font-size:$fontSize;

     }

    p{

    font-size:$fontSize;

    }

在选择器中声明的变量会覆盖外面全局声明的变量。

     body{

    font-size:14px;

     }

    p{

    font-size:14px;

      }

会根据局部变量定义的大小，影响到全局的变量

混合（mixin）

    @mixin ($w,$h) {

      width:$w;

       height:$h;

    }

    @include opacity(80px,60px); 

  

声明的@mixin通过@include来调用。

@if判断

    .ib{

      width:200px;

      

       }

    @if $id== 100px {

     color: blue;

     }  @else {

    color: black;

    }

    }

判断的结果：

     .ib{

        width:200px;

        color: black;

      

       }

  

三目判断

语法为：if($condition, $if_true, $if_false) 。

三个参数分别表示：条件，条件为真的值，条件为假的值。

    if(true, 1px, 2px) => 1px

循环

$i表示变量，

start表示起始值，

end表示结束值，

这两个的区别是关键字through表示包括end这个数，

而to则不包括end这个数。

    @for $i from 1 through 3 {

      .item-#{$i} { width: 2em * $i; }

     }

结果：

     .item-1 {

       width: 2em; 

    }

      .item-2 {

         width: 4em; 

     }

        .item-3 {

         width: 6em; 

    }