SASS的使用總結

一、簡介：

    成熟、穩定、強大的專業級CSS擴展語言

二、特色：

• 兼容CSS
• 特性豐富
• 成熟
• 行業承認
• 社區龐大
• 框架（有無數的框架使用Sass構建。好比Compass，Bourbon，和Susy。）

三、安裝：

    sass是基於Ruby語言開發而成，所以須要先安裝Ruby。網上有不少安裝教程，這裏省略。。。

    Ruby 是一種開源的面向對象程序設計的服務器端腳本語言

四、編譯器：

    koala（推薦）

五、語法：

（1）使用變量：

    sass的變量必須是$開頭，後面緊跟變量名，而變量值和變量名之間就須要使用冒號(:)分隔開（就像CSS屬性設置同樣），若是值後面加上!default則表示默認值。

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}

（2）嵌套CSS規則

    選擇器嵌套：

        在一個選擇器中嵌套另外一個選擇器來實現繼承，從而加強了sass文件的結構性和可讀性。

        在選擇器嵌套中，可使用&表示父元素選擇器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  li{
    float:left;
  }
  a{
    color: #fff;
    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

    屬性嵌套：

        有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

（3）導入SASS文件：

    sass的導入(@import)規則和CSS的有所不一樣，編譯時會將@import的scss文件合併進來只生成一個CSS文件。可是若是你在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件同樣，導入的css文件不會合併到編譯後的文件中，而是以@import方式存在。

    全部的sass導入文件均可以忽略後綴名.scss。通常來講基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候能夠不寫下劃線，可寫成@import "mixin"。

（4）靜默註釋：

    sass有兩種註釋方式，一種是標準的css註釋方式/* */，另外一種則是//雙斜杆形式的單行註釋，不過這種單行註釋不會被轉譯出來。

（5）混合器：

    使用 @mixin 標識符定義，經過 @include 來使用混合器：

//sass style
//----------------------------
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}

//css style
//------------------------------
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

（6）選擇器繼承：

    經過 @extend 語法實現：

//sass style
//----------------------------
.error{
  color: red;
}
.msg{
  @extend .error;
  font-size: 20px;
}

//css style
//----------------------------------
.msg{
  color: red;
  font-size: 20px;
}

SASS和SCSS的關係與區別：

sass和scss實際上是一種東西，都是Sass的語法格式。scss是Sass3引入的新語法。二者不一樣之處有如下兩點：

一、文件擴展名不一樣，Sass是以「.sass」後綴爲擴展名，而Scss是以「.scss」後綴爲擴展名。

二、語法書寫方式不一樣，Sass是以嚴格的縮進式語法規則來寫，不帶大括號（{}）和分號（；），而Scss的語法書寫和咱們的CSS語法書寫方式很是相似。

//Sass語法
$font-stack: Helvetica, sans-serif  //定義變量
$primary-color: #333 //定義變量

body
  font: 100% $font-stack
  color: $primary-color


//Scss語法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}