sass

css預處理語言

寫sass而後使用工具將其編譯成css

sass比css多了不少功能，好比定義變量/循環/嵌套等

 

sass的語言版本有兩種，老版本的後綴名是.sass，新版本的後綴名是.scss

 

在項目中準備使用sass代替css，因此需使用gulp-sass來對sass進行編譯需下載（node-sass    gulp-sass）

 

 

 

 

動態的css            

sass  動態的css

  寫一些語法規範    變量   嵌套   類的重用....

 

sass

body

    background:red;

    font-size:12px;

 

scss

   body{

        ...

    }

 

考拉使用 ：

拖拽css目錄

設置輸出路徑  scss文件要輸出的css文件

識別中文 ： @charset "utf-8";

 

sass語法：

註釋 

    // 不能被css識別      

    /**/ 能夠被css識別

 

變量定義

    $變量   

 

 

傳統css嵌套

   .nav {

     ...

     }

   .nav  ul{

          ...

     }

   .nav ul li{

    ...

     }

 

嵌套方式

     .nav{

          width:960px;

          height : 40px;

          ul{

               margin-left : 20px;

               li{

                    float: left;

               }

          }

     }

 

符合屬性嵌套

border:{

     color: red;

     style:solid;

     width:1px;

}

 

&表示繼承父級標籤

    a{

      &:hover{ color:red }

    }

 

代碼重用(函數)   

sass如何實現代碼重用 ，有幾種方式  ~~~

width:960px;

margin:0 auto;

.public{  //無參數   使用 @extend  .public;

     width:960px;

}

@mixin  public{  //能夠定義參數   使用 :  @include 導入    先定義 後調用  （混合定義）

     ....

}

@mixin public($height:200px){//定義一個默認值

    width: 960px;

    height: $height;

    margin: 0 auto;

}

#header{

    @include public(400px);給具體的參數值 默認值無效，若是不傳遞參數 就按照默認值執行

}

導入：  @import "xxx.scss"   將多個scss文件合併成一個css文件

 

if語句

$type : monster;

$flag : false;    

   

     @if $type==monster {

        display :inline ;

    }

    @if $flag {

        p {color :red; }

    } @else{

         p {color :blue; }

     }

 

for語句

@for $i from 1 through 3 {

  .item-#{$i } { width: 2em * $i ; }    //   .item1   .item2  .item3

}