SASS

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; 
    }