Sass介紹及語法使用

1.概念

Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它允許你使用變量、嵌套規則、 mixins、導入等衆多功能， 並且完全兼容 CSS 語法。 Sass 有助於保持大型樣式表結構良好， 同時也讓你能夠快速開始小型項目， 特別是在搭配 Compass 樣式庫一同使用時。

2.使用變量

sass使用$符號來標識變量

（1）變量聲明

$highlight-color: #F90;

1）任何可以用作css屬性值的賦值都可以用作sass的變量值，甚至是以空格分割的多個屬性值，如

$basic-border: 1px solid black;
//或以逗號分隔的多個屬性值
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;

2）與CSS屬性不同，變量可以在css規則塊定義之外存在。當變量定義在css規則塊內，那麼該變量只能在此規則塊內使用。如果它們出現在任何形式的{...}塊中（如@media或者@font-face塊），情況也是如此：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後

nav {
  width: 100px;
  color: #F90;
}

在這段代碼中，$nav-color這個變量定義在了規則塊外邊，所以在這個樣式表中都可以像 nav規則塊那樣引用它。$width這個變量定義在了nav的{ }規則塊內，所以它只能在nav規則塊 內使用。這意味着是你可以在樣式表的其他地方定義和使用$width變量，不會對這裏造成影響。

3）將局部變量轉換爲全局變量可以添加 !global 聲明

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
//編譯爲
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

4）數據類型

SassScript 支持 6 種主要的數據類型：

• 數字，1, 2, 13, 10px
• 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz
• 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布爾型，true, false
• 空值，null
• 數組 (list)，用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相當於 JavaScript 的 object，(key1: value1, key2: value2)

1.SassScript 支持 CSS 的兩種字符串類型：有引號字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；與無引號字符串 (unquoted strings)，如 sans-serif bold，在編譯 CSS 文件時不會改變其類型。只有一種情況例外，使用 #{} (interpolation) 時，有引號字符串將被編譯爲無引號字符串，這樣便於在 mixin 中引用選擇器名：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");
//編譯爲
body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}

 

（2）變量引用

1）凡是css屬性的標準值（比如說1px或者bold）可存在的地方，變量就可以使用。css生成時，變量會被它們的值所替代。之後，如果你需要一個不同的值，只需要改變這個變量的值，則所有引用此變量的地方生成的值都會隨之改變。

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//編譯後

.selected {
  border: 1px solid #F90;
}

2）在聲明變量時，變量值也可以引用其他變量。

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//編譯後

.selected {
  border: 1px solid #F90;
}

（3）變量名用中劃線還是下劃線分隔

1）sass的變量名可以與css中的屬性名和選擇器名稱相同，包括中劃線和下劃線。這完全取決於個人的喜好，有些人喜歡使用中劃線來分隔變量中的多個詞（如$highlight-color），而有些人喜歡使用下劃線（如$highlight_color）。使用中劃線的方式更爲普遍，這也是compass和本文都用的方式。

不過，sass並不想強迫任何人一定使用中劃線或下劃線，所以這兩種用法相互兼容。用中劃線聲明的變量可以使用下劃線的方式引用，反之亦然。這意味着即使compass選擇用中劃線的命名方式，這並不影響你在使用compass的樣式中用下劃線的命名方式進行引用

$link-color: blue;
a {
  color: $link_color;
}

//編譯後

a {
  color: blue;
}

$link-color和$link_color其實指向的是同一個變量。實際上，在sass的大 多數地方，中劃線命名的內容和下劃線命名的內容是互通的，除了變量，也包括對混合器和Sass函數的命名。但是在sass中純css部分不互通，比如類名、ID或屬性名。

3.嵌套CSS規則

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
/* 編譯後 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}
//編譯後
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

（1）父選擇器的標識符&

article a {
  color: blue;
  &:hover { color: red }
}
//編譯後
article a { color: blue }
article a:hover { color: red }

1）當包含父選擇器標識符的嵌套規則被打開時，它不會像後代選擇器那樣進行拼接，而是&被父選擇器直接替換。

2）可以在父選擇器之前添加選擇器

#content aside {
  color: red;
  body.ie & { color: green }
}
/*編譯後*/
#content aside {color: red};
body.ie #content aside { color: green }

（2）羣組選擇器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
//編譯後
.container h1, .container h2, .container h3 { margin-bottom: .8em }

nav, aside {
  a {color: blue}
}
//編譯後
nav a, aside a {color: blue}

（3）子組合選擇器和同層組合選擇器:“>”、"+"和"~"

（直接子元素選擇器、同層相鄰元素選擇器、同層選擇器）

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
//編譯後
article ~ article { border-top: 1px dashed #ccc }
article > section { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

4.嵌套屬性

在sass中，除了CSS選擇器，屬性也可以進行嵌套。

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
//編譯後
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

（1）嵌套規則

把屬性名從中劃線-的地方斷開，在根屬性後邊添加一個冒號:，緊跟一個{ }塊，把子屬性部分寫在這個{ }塊中。就像css選擇器嵌套一樣，sass會把你的子屬性一一解開，把根屬性和子屬性部分通過中劃線-連接起來，最後生成的效果與你手動一遍遍寫的css樣式一樣。

（2）對於屬性的縮寫形式，你甚至可以像下邊這樣來嵌套，指明例外規則

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//同等樣式
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

4.導入SASS文件

（1）@import規則

1）css:

它允許在一個css文件中導入其他css文件。然而，後果是隻有執行到@import時，瀏覽器纔會去下載其他css文件，這導致頁面加載起來特別慢。

2）sass

sass的@import規則在生成css文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css文件中，而無需發起額外的下載請求。另外，所有在被導入文件中定義的變量和混合器（參見2.5節）均可在導入文件中使用。

（2）sass的@import

1）不需要指明被導入文件的全名。你可以省略.sass或.scss文件後綴。

（3）使用SASS部分文件

1）局部文件

當通過@import把sass樣式分散到多個文件時，你通常只想生成少數幾個css文件。那些專門爲@import命令而編寫的sass文件，並不需要生成對應的獨立css文件，這樣的sass文件稱爲局部文件。sass有一個特殊的約定來命名這些文件。

2）特殊的約定

sass局部文件的文件名以下劃線開頭。這樣，sass就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用作導入。當你@import一個局部文件時，還可以不寫文件的全名，即省略文件名開頭的下劃線。舉例來說，你想導入themes/_night-sky.scss這個局部文件裏的變量，你只需在樣式表中寫@import "themes/night-sky";。

3）局部文件可以被多個不同的文件引用。當一些樣式需要在多個頁面甚至多個項目中使用時，這非常有用。

（4）默認變量值

1）一般情況下，你反覆聲明一個變量，只有最後一處聲明有效且它會覆蓋前邊的值

//超鏈接的color會被設置爲red
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

2）!default

1.含義

如果這個變量被聲明賦值了，那就用它聲明的值，否則就用這個默認值。

2.例子

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

如果用戶在導入你的sass局部文件之前聲明瞭一個$fancybox-width變量，那麼你的局部文件中對$fancybox-width賦值400px的操作就無效。如果用戶沒有做這樣的聲明，則$fancybox-width將默認爲400px。

（5）嵌套導入

1）跟原生的css不同，sass允許@import命令寫在css規則內。這種導入方式下，生成對應的css文件時，局部文件會被直接插入到css規則內導入它的地方。

aside {
  background: blue;
  color: white;
}
//然後把它導入到一個CSS規則內
.blue-theme {@import "blue-theme"}

//生成的結果跟你直接在.blue-theme選擇器內寫_blue-theme.scss文件的內容完全一樣。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

2）被導入的局部文件中定義的所有變量和混合器，也會在這個規則範圍內生效。這些變量和混合器不會全局有效，這樣我們就可以通過嵌套導入只對站點中某一特定區域運用某種顏色主題或其他通過變量配置的樣式。

（6）原生的CSS導入

1）由於sass兼容原生的css，所以它也支持原生的CSS@import。

2）儘管通常在sass中使用@import時，sass會嘗試找到對應的sass文件並導入進來，但在下列三種情況下會生成原生的CSS@import，儘管這會造成瀏覽器解析css時的額外下載。

• 被導入文件的名字以.css結尾；
• 被導入文件的名字是一個URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應服務；
• 被導入文件的名字是CSS的url()值。

3）這就是說，你不能用sass的@import直接導入一個原始的css文件，因爲sass會認爲你想用css原生的@import。但是，因爲sass的語法完全兼容css，所以你可以把原始的css文件改名爲.scss後綴，即可直接導入了。

（7）靜默註釋

1）在原生的css中，註釋對於其他人是直接可見的，但sass提供了一種方式可在生成的css文件中按需抹掉相應的註釋。

2）sass另外提供了一種不同於css標準註釋格式/* ... */的註釋語法，即靜默註釋，其內容不會出現在生成的css文件中。

3）語法

靜默註釋的語法跟JavaScriptJava等類C的語言中單行註釋的語法相同，它們以//開頭，註釋內容直到行末。

body {
  color: #333; // 這種註釋內容不會出現在生成的css文件中
  padding: 0; /* 這種註釋內容會出現在生成的css文件中 */
}

3）實際上，css的標準註釋格式/* ... */內的註釋內容亦可在生成的css文件中抹去。當註釋出現在原生css不允許的地方，如在css屬性或選擇器中，sass將不知如何將其生成到對應css文件中的相應位置，於是這些註釋被抹掉。

body {
  color /* 這塊註釋內容不會出現在生成的css中 */: #333;
  padding: 1; /* 這塊註釋內容也不會出現在生成的css中 */ 0;
}

4）保持sass條理性和可讀性的最基本的三個方法：嵌套、導入和註釋。

5.混合器

（1）使用場景

如果你的整個網站中有幾處小小的樣式類似（例如一致的顏色和字體），那麼使用變量來統一處理這種情況是非常不錯的選擇。但是當你的樣式變得越來越複雜，你需要大段大段的重用樣式的代碼，獨立的變量就沒辦法應付這種情況了。你可以通過sass的混合器實現大段樣式的重用。（樣式展示層的重用）

（2）定義

1）混合器使用@mixin標識符定義。

2）這個標識符給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式

//添加跨瀏覽器的圓角邊框。
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

（3）使用

1）通過@include來使用混合器

2）@include調用會把混合器中的所有樣式提取出來放在@include被調用的地方。

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//sass最終生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

（4）何時使用混合器

1）利用混合器，可以很容易地在樣式表的不同地方共享樣式。

2）如果你發現自己在不停地重複一段樣式，那就應該把這段樣式構造成優良的混合器，尤其是這段樣式本身就是一個邏輯單元，比如說是一組放在一起有意義的屬性。

3）判斷一組屬性是否應該組合成一個混合器，一條經驗法則就是你能否爲這個混合器想出一個好的名字。如果你能找到一個很好的短名字來描述這些屬性修飾的樣式，比如rounded-cornersfancy-font或者no-bullets，那麼往往能夠構造一個合適的混合器。如果你找不到，這時候構造一個混合器可能並不合適。

4）混合器和CSS類區別

1、類名是在html文件中應用的，而混合器是在樣式表中應用的。

2、類名具有語義化含義，而不僅僅是一種展示性的描述：用來描述html元素的含義而不是html元素的外觀。

3、混合器是展示性的描述，用來描述一條css規則應用之後會產生怎樣的效果。

4、混合器主要用於展示性樣式的重用，而類名用於語義化樣式的重用。

.notice是一個有語義的類名。如果一個html元素有一個notice的類名，就表明了這個html元素的用途：向用戶展示提醒信息。rounded-corners混合器是展示性的，它描述了包含它的css規則最終的視覺樣式，尤其是邊框角的視覺樣式。

（5）混合器中的CSS規則

1）混合器中不僅可以包含屬性，也可以包含css規則，包含選擇器和選擇器中的屬性。

2）當一個包含css規則的混合器通過@include包含在一個父規則中時，在混合器中的規則最終會生成父規則中的嵌套規則。

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}
//編譯後

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

3）混合器中的規則甚至可以使用sass的父選擇器標識符&。使用起來跟不用混合器時一樣，sass解開嵌套規則時，用父規則中的選擇器替代&。

（6）給混合器傳參

1）混合器並不一定總得生成相同的樣式。可以通過在@include混合器時給混合器傳參，來定製混合器生成的精確樣式。

2）當@include混合器時，參數其實就是可以賦值給css屬性值的變量

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//當混合器被@include時，你可以把它當作一個css函數來傳參。
a {
  @include link-colors(blue, red, green);
}

//Sass最終生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

3)當你@include混合器時，有時候可能會很難區分每個參數是什麼意思，參數之間是一個什麼樣的順序。爲了解決這個問題，sass允許通過語法$name: value的形式指定每個參數的值。這種形式的傳參，參數順序就不必再在乎了，只需要保證沒有漏掉參數即可。

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

（7）默認參數值

1）爲了在@include混合器時不必傳入所有的參數，我們可以給參數指定一個默認值。

2）聲明

參數默認值使用$name: default-value的聲明形式，默認值可以是任何有效的css屬性值，甚至是其他參數的引用。

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

6.使用選擇器繼承來精簡CSS

選擇器繼承是說一個選擇器可以繼承爲另一個選擇器定義的所有樣式。

1）@extend語法

//通過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

2）.seriousError將會繼承樣式表中任何位置處爲.error定義的所有樣式。以class="seriousError" 修飾的html元素最終的展示效果就好像是class="seriousError error"。相關元素不僅會擁有一個3px寬的邊框，而且這個邊框將變成紅色的，這個元素同時還會有一個淺紅色的背景，因爲這些都是在.error裏邊定義的樣式。

3）.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承。

//.seriousError從.error繼承樣式
.error a{  //應用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //應用到hl.seriousError
  font-size: 1.2rem;
}

如上所示，在class="seriousError"的html元素內的超鏈接也會變成紅色和粗體。

（1）何時使用繼承

因爲繼承是基於類的（有時是基於其他類型的選擇器），所以繼承應該是建立在語義化的關係上。當一個元素擁有的類（比如說.seriousError）表明它屬於另一個類（比如說.error），這時使用繼承再合適不過了。

（2）繼承的高級用法

1）任何css規則都可以繼承其他規則，幾乎任何css規則也都可以被繼承。

2）最常用的一種高級用法是繼承一個html元素的樣式。儘管默認的瀏覽器樣式不會被繼承，因爲它們不屬於樣式表中的樣式，但是你對html元素添加的所有樣式都會被繼承。

.disabled {
  color: gray;
  @extend a;
}

3）假如一條樣式規則繼承了一個複雜的選擇器，那麼它只會繼承這個複雜選擇器命中的元素所應用的樣式。

4）如果一個選擇器序列（#main .seriousError）@extend另一個選擇器（.error），那麼只有完全匹配#main .seriousError這個選擇器的元素纔會繼承.error的樣式，就像單個類名繼承那樣。

（3）繼承的工作細節

1）跟變量和混合器不同，繼承不是僅僅用css樣式替換@extend處的代碼那麼簡單。

2）@extend背後最基本的想法是，如果.seriousError @extend .error， 那麼樣式表中的任何一處.error都用.error.seriousError這一選擇器組進行替換。

3）需知

• 跟混合器相比，繼承生成的css代碼相對更少。因爲繼承僅僅是重複選擇器，而不會重複屬性，所以使用繼承往往比混合器生成的css體積更小。如果你非常關心你站點的速度，請牢記這一點。
• 繼承遵從css層疊的規則。當兩個不同的css規則應用到同一個html元素上時，並且這兩個不同的css規則對同一屬性的修飾存在不同的值，css層疊規則會決定應用哪個樣式。相當直觀：通常權重更高的選擇器勝出，如果權重相同，定義在後邊的規則勝出。

（4）使用繼承的最佳實踐

1）通常使用繼承會讓你的css美觀、整潔。因爲繼承只會在生成css時複製選擇器，而不會複製大段的css屬性。但是如果你不小心，可能會讓生成的css中包含大量的選擇器複製。

2）避免這種情況出現的最好方法就是不要在css規則中使用後代選擇器（比如.foo .bar）去繼承css規則。如果你這麼做，同時被繼承的css規則有通過後代選擇器修飾的樣式，生成css中的選擇器的數量很快就會失控：

3）值得一提的是，只要你想，你完全可以放心地繼承有後代選擇器修飾規則的選擇器，不管後代選擇器多長，但有一個前提就是，不要用後代選擇器去繼承。

7.運算

所有數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。

一、數字運算

SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。

p {
  width: 1in + 8pt;
}
//編譯爲
p {
  width: 1.111in; 
}

關係運算 <, >, <=, >= 也可用於數字運算，相等運算 ==, != 可用於所有數據類型。

（1）除法運算 / 

/ 在 CSS 中通常起到分隔數字的用途，SassScript 作爲 CSS 語言的拓展當然也支持這個功能，同時也賦予了 / 除法運算的功能。也就是說，如果 / 在 SassScript 中把兩個數字分隔，編譯後的 CSS 文件中也是同樣的作用。

1）以下三種情況 / 將被視爲除法運算符號：

• 如果值，或值的一部分，是變量或者函數的返回值
• 如果值被圓括號包裹
• 如果值是算數表達式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
//編譯爲
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

2）如果需要使用變量，同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中，只需要用 #{} 插值語句將變量包裹

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
//編譯爲
p {
  font: 12px/30px; 
}

（2）顏色值運算

1）顏色值的運算是分段計算進行的，也就是分別計算紅色，綠色，以及藍色的值：

p {
  color: #010203 + #040506;
}
//計算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然後編譯爲
p {
  color: #050709; 
}

2）數字與顏色值之間也可以進行算數運算，同樣也是分段計算的。

p {
  color: #010203 * 2;
}
//計算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然後編譯爲
p {
  color: #020406; 
}

3）需要注意的是，如果顏色值包含 alpha channel（rgba 或 hsla 兩種顏色值），必須擁有相等的 alpha 值才能進行運算，因爲算術運算不會作用於 alpha 值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
//編譯爲
p {
  color: rgba(255, 255, 0, 0.75); 
}

4）顏色值的 alpha channel 可以通過 opacify 或 transparentize 兩個函數進行調整。

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
//編譯爲
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}

5）IE 濾鏡要求所有的顏色值包含 alpha 層，而且格式必須固定 #AABBCCDD，使用 ie_hex_str 函數可以很容易地將顏色轉化爲 IE 濾鏡要求的格式。

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}
//編譯爲
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

（3）字符串運算

1）+ 可用於連接字符串

p {
  cursor: e + -resize;
}
//編譯爲
p {
  cursor: e-resize; 
}

注意:如果有引號字符串（位於 + 左側）連接無引號字符串，運算結果是有引號的，相反，無引號字符串（位於 + 左側）連接有引號字符串，運算結果則沒有引號。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
//編譯爲
p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

2）運算表達式與其他值連用時，用空格做連接符

p {
  margin: 3px + 4px auto;
}
//編譯爲
p {
  margin: 7px auto; 
}

3）在有引號的文本字符串中使用 #{} 插值語句可以添加動態的值

p:before {
  content: "I ate #{5 + 10} pies!";
}
//編譯爲
p:before {
  content: "I ate 15 pies!"; 
}

4）空的值被視作插入了空字符串

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
//編譯爲
p:before {
  content: "I ate pies!"; 
}

（4）布爾運算

SassScript 支持布爾型的 and or 以及 not 運算。

（5）數組運算

數組不支持任何運算方式，只能使用 list functions 控制。

8.圓括號

圓括號可以用來影響運算的順序：

p {
  width: 1em + (2em * 3);
}
//編譯爲
p {
  width: 7em; 
}

9.函數

SassScript 定義了多種函數，有些甚至可以通過普通的 CSS 語句調用

p {
  color: hsl(0, 100%, 50%);
}
//編譯爲
p {
  color: #ff0000; 
}

（1）關鍵詞參數

Sass 函數允許使用關鍵詞參數 (keyword arguments)，上面的例子也可以寫成：

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

關鍵詞參數給函數提供了更靈活的接口，以及容易調用的參數。關鍵詞參數可以打亂順序使用，如果使用默認值也可以省缺，另外，參數名被視爲變量名，下劃線、短橫線可以互換使用。

10.插值語句 #{}

（1）通過 #{} 插值語句可以在選擇器或屬性名中使用變量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
//編譯爲
p.foo {
  border-color: blue; 
}

（2）#{} 插值語句也可以在屬性值中插入 SassScript，大多數情況下，這樣可能還不如使用變量方便，但是使用 #{} 可以避免 Sass 運行運算表達式，直接編譯 CSS。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
//編譯爲
p {
  font: 12px/30px; 
}

11.控制指令

SassScript 提供了一些基礎的控制指令，比如在滿足一定條件時引用樣式，或者設定範圍重複輸出格式。控制指令是一種高級功能，日常編寫過程中並不常用到，主要與混合指令 (mixin) 配合使用，尤其是用在 Compass 等樣式庫中。

（1）@if

當 @if 的表達式返回值不是 false 或者 null 時，條件成立，輸出 {}內的代碼：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
//編譯爲
p {
  border: 1px solid; 
}

@if 聲明後面可以跟多個 @else if 聲明，或者一個 @else 聲明。如果 @if 聲明失敗，Sass 將逐條執行 @else if 聲明，如果全部失敗，最後執行 @else 聲明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//編譯爲
p {
  color: green; 
}

（2）@each

@each 指令的格式是 $var in <list>, $var 可以是任何變量名，比如 $length 或者 $name，而 <list> 是一連串的值，也就是值列表。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//編譯爲
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

（3）@while

@while 指令重複輸出格式直到表達式返回結果爲 false。這樣可以實現比 @for 更復雜的循環，只是很少會用到。

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
//編譯爲
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

 

中文文檔：https://www.sass.hk/docs/