Sass(CSS預處理器)

Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。在開發最初版本之後，Weizenbaum和Chris Eppstein繼續通過SassScript來繼續擴充Sass的功能。SassScript是一個在Sass檔案中使用的小型腳本語言。

Sass是一個將腳本解析成CSS的腳本語言，即SassScript。Sass包括兩套語法。最開始的語法叫做“縮進語法”，與Haml類似，使用縮進來區分代碼塊，並且用回車將不同規則分隔開。而較新的語法叫做“SCSS”，使用和CSS一樣的塊語法，即使用大括弧將不同的規則分開，使用分號將具體的樣式分開。通常情況下，這兩套語法通過.sass和.scss兩個檔案擴展名區分開。

基本介紹

• 軟體名稱：Sass
• 上線時間：2006年
• 開發商：Natalie Weizenbaum 
• 軟體授權：MIT License 
• 軟體版本：1.58.3( Dart Sass) 
  3.6.5(LibSass)

概況

Sass擴展了CSS3，增加了規則、變數、混入、選擇器、繼承等等特性。Sass 生成良好格式化的 CSS 代碼，易於組織和維護。

SASS是對CSS3（層疊樣式表）的語法的一種擴充，它可以使用巢狀、混入、選擇子繼承等功能，可以更有效有彈性的寫出Stylesheet。Sass最後還是會編譯出合法的CSS讓瀏覽可以使用，也就是說它本身的語法並不太容易讓瀏覽器識別（雖然它和CSS的語法非常的像，幾乎一樣），因為它不是標準的CSS格式，在它的語法內部可以使用動態變數等，所以它更像一種極簡單的動態語言。

功能

變數

Sass支持定義變數。變數以美元符號（$）作為開頭。變數用冒號（:）賦值。

SassScript支持四種數據類型：

• 數值（可包括單位）
• 字元串
• 顏色
• 布爾類型

變數可以用作函式的參數或返回值。在解釋過程中，解釋器會把變數的值寫入最終的CSS檔案中。

SCSS語法的變數示例：

$blue: #3bbfce;$margin: 16px;.content-navigation {  border-color: $blue;  color: darken($blue, 10%);}.border {  padding: $margin / 2;  margin: $margin / 2;  border-color: $blue;}

Sass語法的變數示例：

$blue: #3bbfce$margin: 16px.content-navigation  border-color: $blue  color: darken($blue, 10%).border  padding: $margin/2  margin:  $margin/2  border-color: $blue

這兩段代碼會被解釋成：

.content-navigation {  border-color: #3bbfce;  color: #2b9eab;}.border {  padding: 8px;  margin: 8px;  border-color: #3bbfce;}

嵌套

CSS雖然支持嵌套但是不支持代碼塊的嵌套，而SCSS支持。這樣可更加清晰地表示元素之間的關係。

table.hl {  margin: 2em 0;  td.ln {    text-align: right;  }}li {  font: {    family: serif;    weight: bold;    size: 1.3em;  }}

會被解釋成：

table.hl {  margin: 2em 0;}table.hl td.ln {  text-align: right;}li {  font-family: serif;  font-weight: bold;  font-size: 1.3em;}

在Sass文檔中還可以看到有關名字空間、父級引用等的內容。

混入（Mixin）

Mixin包含一段合法Sass代碼，類似於C語言的宏定義。調用Mixin時，解釋器會將Mixin擴展成它所包含的完整的Sass代碼，因此可以有效地減少代碼重複，從而寫出更加乾淨的代碼。CSS不支持Mixin，因此重複和類似的代碼必須挨個書寫。

@mixin table-base {  th {    text-align: center;    font-weight: bold;  }  td, th {padding: 2px}}#data {  @include table-base;}

被解釋成

#data th {  text-align: center;  font-weight: bold;}#data td, #data th {  padding: 2px;}

libSass

在2012年HTML5開發者大會上，Sass的創建者Hampton Catlin宣布libSass 1.0版。libSass是一個由Catlin、Araon Leung和Moovweb開發團隊開發的開放原始碼的C++實現。Current Sass maintainer, Chris Eppstein, has expressed intent to contribute as well.

libSass的設計目標是：

• 性能：開發者反映，C++的實現速度是Ruby實現的10倍。
• 更容易集成：因為是一個C++庫，不必集成或實現Ruby解釋器，因此在自行開發軟體的時候事情會變得更容易。例如，libSass已經被套用到Node.js、Go和Ruby等環境。
• 兼容性：libSass的目標是與Ruby實現完全兼容。但是目標尚未完全實現。