Sass(英文全稱:Syntactically Awesome Stylesheets)是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。在開發最初版本之後,Weizenbaum和Chris Eppstein繼續通過SassScript來繼續擴充Sass的功能。SassScript是一個在Sass檔案中使用的小型腳本語言。
Sass是一個將腳本解析成CSS的腳本語言,即SassScript。Sass包括兩套語法。最開始的語法叫做“縮進語法”,與Haml類似[3],使用縮進來區分代碼塊,並且用回車將不同規則分隔開。而較新的語法叫做“SCSS”,使用和CSS一樣的塊語法,即使用大括弧將不同的規則分開,使用分號將具體的樣式分開。通常情況下,這兩套語法通過.sass和.scss兩個檔案擴展名區分開。
基本介紹
準則說明書
CSS製作框架
變數
- 數值(可包括單位)
- 顏色
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 10%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$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;}
嵌套
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;}
混入(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
- 性能:開發者反映,C++的實現速度是Ruby實現的10倍。
- 兼容性:libSass的目標是與Ruby實現完全兼容。但是目標尚未完全實現。