好程序員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  文件

h2   {

  width :   100 px ;

  height :   200 px ;}

·  .sass  文件

h2   width :   100 px height :   200 px

·  .scss 文件

h2   { 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 ; h2   {

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

·  上面定義的變量全局都可以使用

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

h2   {

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

嵌套

·  sass  里面我們最長用到的就是嵌套了

·  而且相當的好用

h2   {

  width :   100 px ;

  div   {

  width :   200 px ;

     } } //   編譯結果h2   {

  width :   100 px ;} h2   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 ;}

·  還有一種就是多個標簽同時嵌套一個標簽

h2 ,   h3 ,   h4   { width :   100 px ;

  .box   { color :   red ;

     }} //   編譯結果h2 ,   h3 ,   h4   {   width :   100 px ;} h2   .box ,   h3   .box ,   h4   .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 ; } h2   {

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

}

h2 {

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

}