Sass
| 設計者 | Hampton Catlin |
|---|---|
| 實作者 | Natalie Weizenbaum, Chris Eppstein |
| 面市時間 | 2007 |
| 目前版本 | |
| 型態系統 | 動態型別 |
| 作業系統 | 跨平台 |
| 授權條款 | MIT授權條款 |
| 副檔名 | .sass, .scss |
| 網站 | sass-lang |
| 主要實作產品 | |
| Ruby | |
| 受影響於 | |
| CSS, YAML, Haml, LESS | |
| 影響語言 | |
| LESS, Stylus, Tritium | |
Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。[2][3]在開發最初版本之後，Weizenbaum和Chris Eppstein繼續通過SassScript來繼續擴充Sass的功能。SassScript是一個在Sass檔案中使用的小型手稿語言。
Sass是一個將指令碼解析成CSS的手稿語言，即SassScript。Sass包括兩套語法。最開始的語法叫做「縮排語法」，與Haml類似[4]，使用縮排來區分代碼塊，並且用換行將不同規則分隔開。而較新的語法叫做「SCSS」，使用和CSS一樣的塊語法，即使用大括號將不同的規則分開，使用分號將具體的樣式分開。通常情況下，這兩套語法通過.sass和.scss兩個副檔名區分開。
CSS3包括一系列選擇器和偽類選擇器，Sass設計了一些語法，對選擇器功能進行了擴充。雖然擴充功能不是CSS的語法，但是Sass直譯器會把SassScript解釋成合乎CSS語法的CSS檔案。此外，Sass直譯器也可以對.sass或.scss檔案的修改進行監視，以及時更新css檔案。[5]可以認為Sass在CSS基礎上加入了許多語法糖。
Sass的官方直譯器是開源的並且用Ruby語言寫成，但是也有用PHP、C語言、Java等實現的版本（C語言版本叫做llibSass，Java語言版本叫做JSass）。[6][7][8]
Sass中縮排是語法的一部分。SCSS是巢狀元語言，一段合法的CSS代碼也是一段合法的SCSS代碼。Sass支援與Firefox外掛程式Firebug整合。[9]
SassScript提供以下功能：變數、巢狀、混入（Mixin）、選擇器繼承。[4]
變數[編輯]
Sass支援定義變數。變數以美元符號（$）作為開頭。變數用冒號（:）賦值。[9]
SassScript支援四種資料類型：[9]
變數可以用作函式的參數或返回值。[10]在解釋過程中，直譯器會把變數的值寫入最終的CSS檔案中。[4]
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支援。這樣可更加清晰地表示元素之間的關係。[4]
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文件中還可以看到有關命名空間、父級參照等的內容。[9]
混入（Mixin）[編輯]
Mixin包含一段合法Sass代碼，類似於C語言的宏定義。呼叫Mixin時，直譯器會將Mixin擴充成它所包含的完整的Sass代碼，因此可以有效地減少代碼重複，從而寫出更加乾淨的代碼。CSS不支援Mixin，因此重複和類似的代碼必須挨個書寫。[4]
@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;
}
迴圈[編輯]
Sass支援用@for、@each和@while語句進行迭代。
$squareCount: 3;
@for $i from 1 through $squareCount {
#square-#{$i} {
background-color: red;
width: 50px * $i;
height: 120px / $i
}
}
會被解釋為：
#square-1 {
background-color: red;
width: 50px;
height: 120px;
}
#square-2 {
background-color: red;
width: 100px;
height: 60px;
}
#square-3 {
background-color: red;
width: 150px;
height: 40px;
}
參數[編輯]
Mixin支援參數。[4]
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
}
會被解釋為：
#data {
float: left;
margin-left: 10px;
}
包含[編輯]
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
會被解釋為：
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
繼承[編輯]
CSS3支援DOM層次，但是不支援樣式的繼承。Sass語言通過@extend關鍵詞實現了繼承功能。[4]
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
會被解釋為：
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
libSass[編輯]
在2012年HTML5開發者大會上，Sass的建立者Hampton Catlin宣布libSass 1.0版。libSass是一個由Catlin、Araon Leung和Moovweb開發團隊開發的開放原始碼的C++實現。[7][11] Current Sass maintainer, Chris Eppstein, has expressed intent to contribute as well.[12]
libSass的設計目標是：
- 效能：開發者反映，C++的實現速度是Ruby實現的10倍。[13]
- 更容易整合：因為是一個C++庫，不必整合或實現Ruby直譯器，因此在自行開發軟體的時候事情會變得更容易。例如，libSass現在已經被應用到Node.js、Go和Ruby等環境。[11]
- 相容性：libSass的目標是與Ruby實現完全相容。但是目標尚未完全實現。[7]
IDE整合[編輯]
參見[編輯]
參考[編輯]
- ^ Latest releases. [2020-02-26]. （原始內容存檔於2020-07-15）.
- ^ 存档副本. [2013-08-30]. （原始內容存檔於2013-09-01）.
- ^ Natalie Weizenbaum's blog. [2015-08-12]. （原始內容存檔於2013-01-16）.
- ^ 4.0 4.1 4.2 4.3 4.4 4.5 4.6 Media Mark（3.2.12）. Sass - Syntactically Awesome Stylesheets. Sass-lang.com. [2014-02-23]. （原始內容存檔於2020-02-18）.
- ^ Sass - Syntactically Awesome Stylesheets （頁面存檔備份，存於網際網路檔案館） Tutorial
- ^ Sass / Scss. Drupal.org. [2014-02-23]. （原始內容存檔於2016-03-10）.
- ^ 7.0 7.1 7.2 H. Catlin. Hampton's 6 Rules of Mobile Design. HTML5 Developer Conference. 2012-10-15 [2013-07-11]. （原始內容存檔於2014-06-24）.
- ^ jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting. Code.google.com. [2014-02-23]. （原始內容存檔於2014-02-12）.
- ^ 9.0 9.1 9.2 9.3 9.4 Sass (Syntactically Awesome StyleSheets) （頁面存檔備份，存於網際網路檔案館） SASS_REFERENCE
- ^ Module: Sass::Script::Functions （頁面存檔備份，存於網際網路檔案館） Sass Functions
- ^ 11.0 11.1 M. Catlin. libsass. Moovweb Blog. 2012-04-30 [2013-07-11]. （原始內容存檔於2013-05-08）.
- ^ C. Eppstein. Tweet. 2012-04-15 [2013-07-11]. （原始內容存檔於2016-03-04）.
- ^ D. Le Nouaille. Sassc and Bourbon. 2013-06-07 [2013-07-11]. （原始內容存檔於2013-06-18）.
外部連結[編輯]
- Module:Official_website第90行Lua錯誤：attempt to index field 'wikibase' (a nil value)
- Haml/Sass Google Group（頁面存檔備份，存於網際網路檔案館）
- pyScss, a Python Scss library and client（頁面存檔備份，存於網際網路檔案館）
- Sai the mixins extension and CSS authoring framework for Less & Sass/Scss (Git)
- Sass tools and resources