這里說(shuō)的 Sass 語(yǔ)法是 Sass 的最初語(yǔ)法格式，他是通過(guò) tab 鍵控制縮進(jìn)的一種語(yǔ)法規(guī)則，而且這種縮進(jìn)要求非常嚴(yán)格。另外其不帶有任何的分號(hào)和大括號(hào)。常常把這種格式稱為 Sass 老版本，其文件名以“.sass”為擴(kuò)展名。
來(lái)看一個(gè) Sass 語(yǔ)法格式的簡(jiǎn)單示例。假設(shè)我們有一段這樣的 CSS 代碼：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

現(xiàn)在用 Sass 的語(yǔ)法格式來(lái)編寫：

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

在整個(gè) Sass 代碼中，我們沒(méi)看到類似 CSS 中的大括號(hào)和分號(hào)。
注：這種語(yǔ)法格式對(duì)于前端人員都不太容易接受，而且容易出錯(cuò)。

二、SCSS語(yǔ)法格式

SCSS 是 Sass 的新語(yǔ)法格式，從外形上來(lái)判斷他和 CSS 長(zhǎng)得幾乎是一模一樣，代碼都包裹在一對(duì)大括號(hào)里，并且末尾結(jié)束處都有一個(gè)分號(hào)。其文件名格式常常以“.scss”為擴(kuò)展名。

同樣的這段 CSS 代碼：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

我們使用 SCSS 語(yǔ)法格式將按下面這樣來(lái)書(shū)寫：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

這樣的語(yǔ)法格式對(duì)于從事前端工作的同學(xué)來(lái)說(shuō)更易于接受，這也是 SCSS 為什么更被前端人員青瞇的原因。

不管是 Sass 的語(yǔ)法格式還是 SCSS 的語(yǔ)法格式，他們的功能都是一樣的，不同的是其書(shū)寫格式和文件擴(kuò)展名不同，來(lái)看一個(gè)簡(jiǎn)單的對(duì)比圖：

正因?yàn)槿绱?，有不少同學(xué)使用 Sass 新的語(yǔ)法規(guī)則，而文件擴(kuò)展名依舊使用的是“.sass”，這也就造成血案了，編譯時(shí)說(shuō)編譯不出來(lái)。在此特別提醒新同學(xué)：“.sass”只能使用 Sass 老語(yǔ)法規(guī)則（縮進(jìn)規(guī)則），“.scss”使用的是 Sass 的新語(yǔ)法規(guī)則，也就是 SCSS 語(yǔ)法規(guī)則（類似 CSS 語(yǔ)法格式）。

特別提醒：本系列教程后面采用的語(yǔ)法格式都將使用的是 SCSS 語(yǔ)法格式。