-
SASs
（CSS預處理器）
鎖定
Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。在開發最初版本之後，Weizenbaum和Chris Eppstein繼續通過SassScript來繼續擴充Sass的功能。SassScript是一個在Sass文件中使用的小型腳本語言。
SASs概況
Sass擴展了CSS3，增加了規則、變量、混入、選擇器、繼承等等特性。Sass 生成良好格式化的 CSS 代碼，易於組織和維護。
SASS是對CSS3（層疊樣式表）的語法的一種擴充，它可以使用巢狀、混入、選擇子繼承等功能，可以更有效有彈性的寫出Stylesheet。Sass最後還是會編譯出合法的CSS讓瀏覽可以使用，也就是説它本身的語法並不太容易讓瀏覽器識別（雖然它和CSS的語法非常的像，幾乎一樣），因為它不是標準的CSS格式，在它的語法內部可以使用動態變量等，所以它更像一種極簡單的動態語言。
SASs功能
SASs變量
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;}
SASs嵌套
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文檔中還可以看到有關名字空間、父級引用等的內容。
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;}
SASslibSass
在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倍。
- 兼容性：libSass的目標是與Ruby實現完全兼容。但是目標尚未完全實現。
- 參考資料
-
- 1. 淺析Sass預編譯語言在圖片輪播效果中的應用 ．知網[引用日期2021-06-30]
- 2. Sass: Syntactically Awesome Style Sheets ．Sass．2020-01-05[引用日期2023-02-21]
- 3. Sass 教程 | 菜鳥教程 ．菜鳥教程．2020-01-05[引用日期2023-02-21]
