Sass(英文全稱:Syntactically Awesome Stylesheets)是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。[3][4]在開發最初版本之後,Weizenbaum和Chris Eppstein繼續通過SassScript來繼續擴充Sass的功能。SassScript是一個在Sass檔案中使用的小型手稿語言。

Sass
設計者Hampton Catlin
實作者Natalie Weizenbaum, Chris Eppstein
釋出時間2007
目前版本
  • 3.4.8(2014年11月14日)[1]
編輯維基數據連結
型態系統動態型別
作業系統跨平台
特許條款MIT特許條款
副檔名.sass, .scss
網站sass-lang.com
主要實作產品
Ruby
啟發語言
CSS, YAML, Haml, LESS
影響語言
LESS, Stylus, Tritium

Sass是一個將指令碼解析成CSS手稿語言,即SassScript。Sass包括兩套語法。最開始的語法叫做「縮排語法」,與Haml類似[5],使用縮排來區分代碼塊,並且用換行將不同規則分隔開。而較新的語法叫做「SCSS」,使用和CSS一樣的塊語法,即使用大括號將不同的規則分開,使用分號將具體的樣式分開。通常情況下,這兩套語法通過.sass和.scss兩個副檔名區分開。

CSS3包括一系列選擇器和偽類選擇器,Sass設計了一些語法,對選擇器功能進行了擴充。雖然擴充功能不是CSS的語法,但是Sass直譯器會把SassScript解釋成合乎CSS語法的CSS檔案。此外,Sass直譯器也可以對.sass或.scss檔案的修改進行監視,以及時更新css檔案。[6]可以認為Sass在CSS基礎上加入了許多語法糖

Sass的官方直譯器是開源的並且用Ruby語言寫成,但是也有用PHPC語言Java等實現的版本(C語言版本叫做llibSass,Java語言版本叫做JSass)。[7][8][9]

Sass中縮排是語法的一部分。SCSS是巢狀元語言,一段合法的CSS代碼也是一段合法的SCSS代碼。Sass支援與Firefox外掛程式Firebug整合。[10]

SassScript提供以下功能:變數、巢狀、混入(Mixin)、選擇器繼承[5]

變數

Sass支援定義變數。變數以美元符號$)作為開頭。變數用冒號(:賦值[10]

SassScript支援四種資料類型:[10]

變數可以用作函數的參數或返回值。[11]在解釋過程中,直譯器會把變數的值寫入最終的CSS檔案中。[5]

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支援。這樣可更加清晰地表示元素之間的關係。[5]

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文件中還可以看到有關命名空間、父級參照等的內容。[10]

混入(Mixin)

Mixin包含一段合法Sass代碼,類似於C語言的宏定義。呼叫Mixin時,直譯器會將Mixin擴充成它所包含的完整的Sass代碼,因此可以有效地減少代碼重複,從而寫出更加乾淨的代碼。CSS不支援Mixin,因此重複和類似的代碼必須挨個書寫。[5]

@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支援參數。[5]

@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關鍵詞實現了繼承功能。[5]

.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;
}

Sass支援多重繼承.[10]

libSass

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

libSass的設計目標是:

  • 效能:開發者反映,C++的實現速度是Ruby實現的10倍。[14]
  • 更容易整合:因為是一個C++庫,不必整合或實現Ruby直譯器,因此在自行開發軟件的時候事情會變得更容易。例如,libSass現在已經被應用到Node.jsGoRuby等環境。[12]
  • 相容性:libSass的目標是與Ruby實現完全相容。但是目標尚未完全實現。[8]

IDE整合

IDE 軟件 網站
Adobe Dreamweaver CC 2017 https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/(頁面存檔備份,存於互聯網檔案館
Eclipse
Emacs SCSS Mode https://github.com/antonj/scss-mode/(頁面存檔備份,存於互聯網檔案館
JetBrains IntelliJ IDEA (Ultimate Edition) https://www.jetbrains.com/idea/(頁面存檔備份,存於互聯網檔案館
JetBrains PhpStorm http://www.jetbrains.com/phpstorm/(頁面存檔備份,存於互聯網檔案館
JetBrains RubyMine http://www.jetbrains.com/ruby/(頁面存檔備份,存於互聯網檔案館
Microsoft Visual Studio Mindscape http://www.mindscapehq.com/products/web-workbench(頁面存檔備份,存於互聯網檔案館
Microsoft Visual Studio SassyStudio http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d(頁面存檔備份,存於互聯網檔案館
Microsoft WebMatrix http://www.microsoft.com/web/(頁面存檔備份,存於互聯網檔案館
NetBeans http://plugins.netbeans.org/plugin/34929/scss-support(頁面存檔備份,存於互聯網檔案館
Vim haml.zip http://www.vim.org/scripts/script.php?script_id=1433(頁面存檔備份,存於互聯網檔案館
Atom https://github.com/atom/language-sass(頁面存檔備份,存於互聯網檔案館
Visual Studio Code https://code.visualstudio.com/Docs/languages/css(頁面存檔備份,存於互聯網檔案館
Sublime https://github.com/P233/Syntax-highlighting-for-Sass(頁面存檔備份,存於互聯網檔案館
Edit+ https://www.editplus.com/others.html(頁面存檔備份,存於互聯網檔案館

參見

參考

  1. ^ http://sass-lang.com/documentation/file.SASS_CHANGELOG.html.
  2. ^ Latest releases. [2020-02-26]. (原始內容存檔於2020-07-15). 
  3. ^ 存档副本. [2013-08-30]. (原始內容存檔於2013-09-01). 
  4. ^ Natalie Weizenbaum's blog. [2015-08-12]. (原始內容存檔於2013-01-16). 
  5. ^ 5.0 5.1 5.2 5.3 5.4 5.5 5.6 Media Mark(3.2.12). Sass - Syntactically Awesome Stylesheets. Sass-lang.com. [2014-02-23]. (原始內容存檔於2020-02-18). 
  6. ^ Sass - Syntactically Awesome Stylesheets頁面存檔備份,存於互聯網檔案館) Tutorial
  7. ^ Sass / Scss. Drupal.org. [2014-02-23]. (原始內容存檔於2016-03-10). 
  8. ^ 8.0 8.1 8.2 H. Catlin. Hampton's 6 Rules of Mobile Design. HTML5 Developer Conference. 2012-10-15 [2013-07-11]. (原始內容存檔於2014-06-24). 
  9. ^ jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting. Code.google.com. [2014-02-23]. (原始內容存檔於2014-02-12). 
  10. ^ 10.0 10.1 10.2 10.3 10.4 Sass (Syntactically Awesome StyleSheets)頁面存檔備份,存於互聯網檔案館) SASS_REFERENCE
  11. ^ Module: Sass::Script::Functions頁面存檔備份,存於互聯網檔案館) Sass Functions
  12. ^ 12.0 12.1 M. Catlin. libsass. Moovweb Blog. 2012-04-30 [2013-07-11]. (原始內容存檔於2013-05-08). 
  13. ^ C. Eppstein. Tweet. 2012-04-15 [2013-07-11]. (原始內容存檔於2016-03-04). 
  14. ^ D. Le Nouaille. Sassc and Bourbon. 2013-06-07 [2013-07-11]. (原始內容存檔於2013-06-18). 

外部連結