好程式設計師web前端培訓分享JavaScript學習筆記SASS

　　 好程式設計師web 前端培訓分享 JavaScript 學習筆記 SASS ， 世界上最成熟、最穩定、最強大的專業級CSS 擴充套件語言！

·  sass  是一個 css 的預編譯工具

·  也就是能夠  更優雅  的書寫 css

·  sass  寫出來的東西  瀏覽器不認識

·  依舊是要轉換成 css 在瀏覽器中執行

·  這個時候就需要一個工具來幫我們做

安裝 sass 環境

·  以前的  sass  需要依賴一個  ruby  的環境

·  現在的  sass  需要依賴一個  python  的環境

·  但是我們的 node 強大了以後，我們只需要依賴  node  環境也可以

·  需要我們使用 npm 安裝一個全域性的  sass  環境就可以了

# 安裝全域性 sass 環境

$ npm install sass -g

編譯 sass

·  有了全域性的  sass  環境以後

·  我們就可以對  sass  的檔案進行編譯了

·  sass  的檔案字尾有兩種，一種是  .sass  一種是  .scss

·  他們兩個的區別就是有沒有  {}  和  ;

·  .scss  檔案

h1   {

  width :   100 px ;

  height :   200 px ;}

·  .sass  檔案

h1   width :   100 px height :   200 px

·  .scss 檔案

h1   { width :   100 px ; height :   200 px ;}

·  我們比較常用的還是  .scss  檔案

·  因為  .sass  我們寫不習慣，當然，如果你能寫習慣也比較好用

·  我們先不管裡面的的什麼內容，至少這個  .scss  或者  .sass  檔案瀏覽器就不認識

·  我們就要用指令把 這兩種 檔案變成 css 檔案

#   把   index.scss   編譯 ， 輸出成   index.css$   sass   index.scss   index.css

·  這樣我們就能得到一個 css 檔案，在頁面裡面也是引入一個 css 檔案就可以了

實時編譯

·  我們剛才的編譯方式只能編譯一次

·  當你修改了檔案以後要從新執行一遍指令才可以

·  實時編譯就是隨著你檔案的修改，自動從新編譯成 css 檔案

·  也是使用指令來完成

# 實時監控 index.scss 檔案，只要發生修改就自動編譯，並放在 index.css 檔案裡面

$ sass --watch index.scss:index.css

·  然後你只要修改  index.scss  檔案的內容， index.css  檔案中的內容會自動更新

實時監控目錄

·  之前的實時監控只能監控一個檔案

·  但是我們有可能要寫很多的檔案

·  所以我們要準備一個資料夾，裡面放的全部都是 sass 檔案

·  實時的把裡面的每一個檔案都編譯到 css 資料夾裡面

·  依舊是使用指令的形式來完成

# 實時監控 sass 這個目錄，只要有變化，就會實時響應在 css 資料夾下

$ sass --watch sass:css

·  這樣，只要你修改 sass 資料夾下的內容，就會實時的相應在 css 資料夾中

·  你新新增一個檔案也會實時響應

·  但是你刪除一個檔案，css 資料夾中不會自動刪除，需要我們自己手動刪除

sass 語法

·  我們能編譯  sass  檔案了，接下來我們就該學習一下  sass  的語法了

·  為什麼他這麼強大，這麼好用，都是靠強大的語法

·  .sass  和  .scss  檔案的語法是一樣的，只不過區別就是  {}  和  ;

變數

·  定義一個變數，在後面的程式碼中使用

·  使用  $  來定義變數
// 定義一個 $c 作為變數，值是 紅色

$c :   red ; h1   {

  //   在使用   $ c   這個變數   color :   $c ;}

·  上面定義的變數全域性都可以使用

·  我們也可以在規則塊內定義私有變數

h1   {

  //   這個   $ w   變數只能在   h1   這個規則塊中使用   $w :   100 px ; width :   $w ;}

巢狀

·  sass  裡面我們最長用到的就是巢狀了

·  而且相當的好用

h1   {

  width :   100 px ;

 

  div   {

  width :   200 px ;

     } } //   編譯結果h1   {

  width :   100 px ;} h1   div   {

  width :   200 px ;}

·  這個就是巢狀，理論上可以無限巢狀下去

ul   {

     width :   100 px ;

    

     li   {

         width :   90 px ;

        

         div   {

             width :   80 px ;

            

             p   {

                 width :   70 px ;

                

                 span:   {

                     color:   red ;

                 }

             }

         }

     }}

 

巢狀中的 &

·  在巢狀中還有一個識別符號是  &  我們可以使用

·  先來看一個例子

div   { width :   100 px ; height :   100 px ;

 

     :hover   { width :   200 px ;

     }} //   我想的是   div   被滑鼠懸停的時候   width   變成   200 //   但是編譯結果卻是div   { width :   100 px ; height :   100 px ;} div   :hover   {   width :   200 px ;}

·  和預想的結果不一樣了

·  這個時候就要用到  &  來連線了

div   { width :   100 px ; height :   100 px ;

     & :hover   { width :   200 px ;

     }} //   編譯結果div   { width :   100 px ; height :   100 px ;} div :hover   {   width :   200 px ;}

·  這個時候就和我需要的一樣了

群組巢狀

·  群組巢狀就是多個標籤同時巢狀

div   {

  width :   100 px ;

 

  .box1,   .box2,   .box3   {

  color :   red ;

     } } //   編譯結果div   {

   width :   100 px ;} div   . box1 ,   div   . box2 ,   div   . box3   {

   color :   red ;}

·  還有一種就是多個標籤同時巢狀一個標籤

h1 ,   h2 ,   h3   { width :   100 px ;

  .box   { color :   red ;

     }} //   編譯結果h1 ,   h2 ,   h3   {   width :   100 px ;} h1   .box ,   h2   .box ,   h3   .box   {   color :   red ;}

巢狀屬性

·  在  scss  裡面還有一種特殊的巢狀

·  叫做  屬性巢狀

·  和選擇器巢狀不一樣，是寫屬性的時候使用的

div   { border :   { style :   solid ; width :   10 px ; color :   pink ;

     }} //   編譯結果div   { border-style :   solid ; border-width :   10 px ; border-color :   pink ;}

·  這個屬性巢狀還可以有一些特殊使用

div   { border :   1 px   solid   #333   { bottom :   none ;

     }} //   編譯結果div   { border :   1 px   solid   #333 ; border-bottom :   none ;}

混入

·  也叫  混合器

·  其實就是定義一個 “函式” 在  scss  檔案中使用

//   定義一個混合器使用    @ mixin   關鍵字 @mixin  radius   { -webkit-border-radius :   10 px ; -moz-border-radius :   10 px ; -ms-border-radius :   10 px ; -o-border-radius :   10 px ; border-radius :   10 px ;}

·  上面是定義好的一個混合器

·  他是不會被編譯的，只有當你使用了他以後，才會被編譯

//   使用混合器使用   @ include   關鍵字div   { width :   100 px ; height :   100 px ;

  @ include   radius ; }

·  這個就是吧剛才定義的混合器拿過來使用

·  編譯結果

div   { width :   100 px ; height :   100 px ; -webkit-border-radius :   10 px ; -moz-border-radius :   10 px ; -ms-border-radius :   10 px ; -o-border-radius :   10 px ; border-radius :   10 px ;}

混合器傳參

·  我們既然說了，混合器就像一個 “函式” 一樣，那麼就一定可以像 “函式” 一樣傳遞引數

·  和 “函式” 的使用方式一樣，在定時的時候是 “形參”，在呼叫的時候是 “實參”

//   定義混合器 @mixin  my_transition ( $pro ,   $dur ,   $delay ,   $tim )   { -webkit-transition :   $pro   $dur   $delay   $tim ; -moz-transition :   $pro   $dur   $delay   $tim ; -ms-transition :   $pro   $dur   $delay   $tim ; -o-transition :   $pro   $dur   $delay   $tim ; transition :   $pro   $dur   $delay   $tim ;}

·  使用這個混合器的時候傳遞 “實參”

div   { width :   100 px ; height :   100 px ;

  @ include   my_transition ( all ,   1s ,   0s ,   linear ); }

·  編譯結果

div   {

  width :   100 px ;

  height :   100 px ;

  -webkit-transition :   all   1 s   0 s   linear ;

  -moz-transition :   all   1 s   0 s   linear ;

  -ms-transition :   all   1 s   0 s   linear ;

  -o-transition :   all   1 s   0 s   linear ;

  transition :   all   1 s   0 s   linear ;}

·  寫了多少個 “形參”，那麼呼叫的時候就要傳遞多少個 “實參”

·  不然會報錯的

引數預設值

·  我們在定義混合器的時候，也可以給一些引數寫一些預設值

·  這樣一來，就可以不傳遞 “實參” 了

// 設定一些帶有預設值的引數 @mixin  my_transition ( $dur :   1 s ,   $pro :   all ,   $delay :   0 s ,   $tim :   linear)   {

  -webkit-transition :   $ dur   $ pro   $ delay   $ tim ;

  -moz-transition :   $ dur   $ pro   $ delay   $ tim ;

  -ms-transition :   $ dur   $ pro   $ delay   $ tim ;

  -o-transition :   $ dur   $ pro   $ delay   $ tim ;

  transition :   $ dur   $ pro   $ delay   $ tim ; }

·  使用的時候，如果你不傳遞，那麼就是使用預設值

div   { width :   100 px ; height :   100 px ;

 

  //   使用的時候 ， 只傳遞一個 ， 剩下的使用預設值

  @ include   my_transition ( 2s ); }

·  編譯結果

div   {

  width :   100px ;

  height :   100px ;

  -webkit-transition :   2s   all   0s   linear ;

  -moz-transition :   2s   all   0s   linear ;

  -ms-transition :   2s   all   0s   linear ;

  -o-transition :   2s   all   0s   linear ;

  transition :   2s   all   0s   linear ; }

繼承

·  在  sass  裡面使用繼承可以大大的提高開發效率

·  其實繼承很簡單，就是把之前寫過的選擇器裡面的內容直接拿過來一份

div   {

  width :   100 px ;

  height :   100 px ;

  background-color :   pink ;}

·  這個是之前寫過的一個規則樣式表

·  接下來我要寫另外一個樣式了，發現我要寫的一些內容和之前這個 div 一樣，並且還有一些我自己的內容

·  那麼我就可以把這個樣式表先繼承下來，再寫我自己的內容就好了

p   {

  @extend   div ;

  font-size :   20px ;

  color :   red ; }

·  編譯結果

div ,   p   {

  width :   100 px ;

  height :   100 px ;

  background-color :   pink ;} p   {

  font-size :   20 px ;

  color :   red ;}

註釋

·  在  scss  檔案中的註釋分為幾種

1、編譯的時候不會被編譯的註釋

// 我是一個普通註釋，在編譯的時候，我就被過濾了

2、編譯的時候會被編譯的註釋

/* 我在編譯的時候，會被一起編譯過去 */

3、強力註釋

/*! 我是一個強力註釋，不光編譯的時候會被編譯過去，將來壓縮檔案的時候也會存在 */

匯入檔案

·  我們剛才學過了定義變數，定義混合器

·  而這兩個內容在定義過以後，如果沒有使用，是不會被編譯出內容的

·  所以我們可以把變數單獨寫一個檔案，混合器單獨寫一個檔案，然後直接匯入後使用

// 我是 variable.scss $w :   100 px ; $h :   200 px ; $c :   pink ; //   我是   mixin .scss @ mixin   my_transition ( $ dur :   1s ,   $ pro :   all ,   $ delay :   0s ,   $ tim :   linear )   {

  -webkit-transition :   $ dur   $ pro   $ delay   $ tim ;

  -moz-transition :   $ dur   $ pro   $ delay   $ tim ;

  -ms-transition :   $ dur   $ pro   $ delay   $ tim ;

  -o-transition :   $ dur   $ pro   $ delay   $ tim ;

  transition :   $ dur   $ pro   $ delay   $ tim ; } @ mixin   radius   {

  -webkit-border-radius :   10px ;

  -moz-border-radius :   10px ;

  -ms-border-radius :   10px ;

  -o-border-radius :   10px ;

  border-radius :   10px ; }

·  然後在我們的主要檔案中把這個兩個檔案匯入進來就行了

// 我是 index.scss @import   './variable.scss' ; @import   './mixin.scss' ; div   {

  width :   $ w ;

  height :   $ h ;

  background-color :   $ c ;

  @ include   radius ; } h1   {

  @include  my_transition;}

·  編譯結果

div {

 width: 100px;

 height: 200px;

 background-color: pink;

 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 -ms-border-radius: 10px;

 -o-border-radius: 10px;

 border-radius: 10px;

}

h1 {

 -webkit-transition: 1s all 0s linear;

 -moz-transition: 1s all 0s linear;

 -ms-transition: 1s all 0s linear;

 -o-transition: 1s all 0s linear;

 transition: 1s all 0s linear;

}