Sass用法指南_20151109筆記

寫在前面的話：隨着CSS文件愈來愈大，內容愈來愈複雜，對其進行很好的維護將變的很困難。這時CSS預處理器就可以幫上大忙了，它們每每擁有變量、嵌套、繼承等許多CSS不具有的特性。有不少CSS預處理器，這裏總結Sass的使用方法。

======正文開始======

　　 咱們能夠經過一種相似css的編程語言編寫代碼，保存爲.scss後綴名的文件，而後使用Sass進行處理爲css文件，而這種.scss文件中能夠有變量、嵌套等功能，有些編程的味道,Sass簡單介紹看這裏：Sass；同時.scss文件也可以經過Sass處理爲壓縮的、縮進的等不一樣風格的css代碼，方便後期的部署。下面是個人一些學習總結。

1、環境佈置

1.安裝rubby：

　　Sass是用ruby寫的，須要ruby的運行環境，從如下連接下載rubyinstaller進行安裝（windows）：http://rubyinstaller.org/

2.安裝Sass

 　　安裝完成ruby後，接下來安裝Sass。因爲國內ruby源如今被牆，經過下面方式進行安裝SASS，打開cmd命令行。

（1）移除原有的ruby源地址

gem sources --remove https://rubygems.org/

（2）新增可用的ruby源地址

gem sources -a https://ruby.taobao.org

（3） 安裝Sass

gem install sass

（4）sublime支持scss文件高亮顯示

藉助package control安裝sass插件，以後set syntax爲sass便可。

（5）防止Sass中文註釋亂碼

後續寫.scss代碼過程當中中文註釋會有亂碼的狀況，找到engine.rb文件（通常位於Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目錄下面），在全部的require後面新增以下代碼：

Encoding.default_external = Encoding.find('utf-8')

至此，Sass環境部署完成。

2、編譯.scss文件爲css文件

　　總結具體Sass語法格式以前，先說一下如何編譯.scss文件爲css文件。

1.切換到.scss文件所在目錄

　　命令行下切換到代碼文件夾目錄（如Z:\），假設有文件test.scss文件，裏面內容以下：（SASS徹底支持css語法）

h1{
    font-size:17px;    
}
h2{
    font-size:18px;
}

2.編譯scss文件爲css文件

　　運行命令：sass --style compressed test.scss test.css，便可生成壓縮版的css文件，而且命名爲test.css。幾點說明：

（1）--style 後面能夠有四個參數可選，分別爲expanded、nested、compact、compressed，分別選用不一樣參數的效果能夠本身嘗試體驗。

（2）test.scss和test.css文件目錄能夠自定義，例如把Z盤sass目錄下的test.scss文件編譯爲壓縮版的文件，並放置在Z盤css目錄下，那麼命令即：sass --style compressed z:\sass\test.scss z:\css\test.css

（3）開發過程當中，只須要修改scss文件，而後編譯；前端頁面只須要引用相應的css文件便可。

3.偵聽文件和文件夾

　　若是但願某一個scss文件或者相應的文件夾下面文件修改後，自動進行編譯，那麼可使用偵聽命令。

（1）偵聽文件：

sass --watch --style compressed test.scss:test.css

當test.scss文件有修改後，會自動編譯爲test.css，而且是compressed的。

（2）偵聽文件夾：

sass --watch --style compressed sass:css

當sass文件夾下.scss文件有修改的時候，會自動編譯爲與sass中文件同名的css文件。

 備註：

（1）注意源文件和目標文件之間是冒號，與編譯命令中爲空格不一樣。

（2）生成的map文件能夠查找source map文件的做用。

3、Sass基本用法

　　下面對Sass基本的用法進行總結，SASS語法與CSS具備極高的類似度。

　　如下演示源代碼放在test.scss文件中，編譯後生成的css文件放在test.css文件中，偵聽命令爲：

　　sass --watch --style expanded sass/test.scss:css/test.css

1.變量：以$開頭。

　　源代碼：

1 2 3 4

$color 1: #aeaeae ; .div 1 {      background-color :$color 1 ; }

　　編譯後： 

1 2 3 4 5

.div 1  {    background-color :  #aeaeae ; }   /*# sourceMappingURL=test.css.map */

2.變量嵌套在字符串之中：應該以#{}包裹。

　　源代碼：

1 2 3 4

$ left : left ; .div 1 {      border-#{$ left }- width : 5px ; }

　　編譯後：

1 2 3 4 5

.div 1  {    border-left-width :  5px ; }   /*# sourceMappingURL=test.css.map */

3.容許進行計算：

　　源代碼：

1 2 3 4

$ left : 20px ; .div 1 {      margin-left :$ left + 12px ; }

　　編譯後：

1 2 3 4 5

.div 1  {    margin-left :  32px ; }   /*# sourceMappingURL=test.css.map */

4.容許選擇器嵌套：

　　源代碼：

1 2 3 4 5 6 7 8

.div 1 {      .span 1 {          height :  12px ;      }      .div 2 {          width :  16px ;      } }

　　編譯後：

1 2 3 4 5 6 7 8

.div 1  .span 1  {    height :  12px ; } .div 1  .div 2  {    width :  16px ; }   /*# sourceMappingURL=test.css.map */

5.使用&引用父元素

　　源代碼：

1 2 3 4 5

.div 1 {      &:hover{          cursor : hand;      } }

　　編譯後：

1 2 3 4 5

.div 1: hover {    cursor : hand; }   /*# sourceMappingURL=test.css.map */

6.註釋：

　　有三種形式：

（1）//comment：該註釋只是在.scss源文件中有，編譯後的css文件中沒有。

（2）/*! */：重要註釋，任何style的css文件中都會有，通常放置css文件版權說明等信息。

（3）/* */：該註釋在compressed的style的css中沒有，其餘style的css文件都會含有。

備註：平時（1）（2）使用的多些

7.容許繼承：@extend 類名

　　源代碼：

1 2 3 4 5 6 7

.class 1 {      font-size : 19px ; } .class 2 {      @extend .class 1 ;      color : black ; }

　　編譯後：

1 2 3 4 5 6 7 8 9

.class 1 , .class 2  {    font-size :  19px ; }   .class 2  {    color :  black ; }   /*# sourceMappingURL=test.css.map */

　　注意：若是在class2後面有設置了class1的屬性，那麼也會影響class2，以下：

　　源代碼：

1 2 3 4 5 6 7 8 9 10

.class 1 {      font-size : 19px ; } .class 2 {      @extend .class 1 ;      color : black ; } .class 1 {      font-weight : bold ; }

　　編譯後：

1 2 3 4 5 6 7 8 9 10 11 12 13

.class 1 , .class 2  {    font-size :  19px ; }   .class 2  {    color :  black ; }   .class 1 , .class 2  {    font-weight :  bold ; }   /*# sourceMappingURL=test.css.map */

　　可見sass不是單遍編譯。

8.引用外部css文件（Partials）

　　有時網頁的不一樣部分會分紅多個文件來寫樣式，或者引用通用的一些樣式，那麼可使用@import。

　　源代碼：

1 2 3

@import  "_test1.scss" ; @import  "_test2.scss" ; @import  "_test3.scss" ;

　　編譯後：

1 2 3 4 5 6 7 8 9 10 11 12 13

h 1  {    font-size :  17px ; }   h 2  {    font-size :  17px ; }   h 3  {    font-size :  17px ; }   /*# sourceMappingURL=test.css.map */

　　其中_test1.scss、_test2.scss、_test3.scss文件分別設置的h1 h2 h3。通常狀況下，複用的文件名若是如下劃線_開頭的話，Sass會認爲該文件是一個partial file，不會將其編譯爲css文件，主要功能是要經過import引用。

9.mixin和include：

　　mixin相似於C語音的宏，存儲通用模塊，經過@include引用。

　　源代碼：

1 2 3 4 5 6 7 8

@mixin common{      display : block ;      margin : 0  auto ; } .class 1 {      font-size : 16px ;      @include common; }

　　編譯後：

1 2 3 4 5 6 7

.class 1  {    font-size :  16px ;    display :  block ;    margin :  0  auto ; }   /*# sourceMappingURL=test.css.map */

　　還能夠更靈活，像函數同樣，以下：

　　源代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@mixin common($value 1 ,$value 2 ,$defaultValue: 12px ){      display : block ;      margin-left :$value 1 ;      margin-right :$value 2 ;      padding :$defaultValue; } .class 1 {      font-size : 16px ;      @include common( 12px , 13px , 15px ); } .class 2 {      font-size : 16px ;      @include common( 12px , 13px ); }

　　編譯後：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.class 1  {    font-size :  16px ;    display :  block ;    margin-left :  12px ;    margin-right :  13px ;    padding :  15px ; }   .class 2  {    font-size :  16px ;    display :  block ;    margin-left :  12px ;    margin-right :  13px ;    padding :  12px ; }   /*# sourceMappingURL=test.css.map */

　　最後，bootstrap第四版發佈了下載，而且從less轉移到了sass，能夠下載裏面看看它裏面的scss代碼，體會一下，也許你會發現更多有趣的用法。