Sass 語法格式

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

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

現(xiàn)在用 Sass 的語法格式來編寫：

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

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

在整個 Sass 代碼中，我們沒看到類似 CSS 中的大括號和分號。
注：這種語法格式對于前端人員都不太容易接受，而且容易出錯。

Scss 語法格式

我們使用 SCSS 語法格式將按下面這樣來書寫：

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

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

不管是 Sass 的語法格式還是 SCSS 的語法格式，他們的功能都是一樣的，不同的是其書寫格式和文件擴展名不同

正因為如此，有不少同學使用 Sass 新的語法規(guī)則(scss)，而文件擴展名依舊使用的是“.sass”，這也就造成血案了，編譯時說編譯不出來。在此特別提醒新同學：“.sass”只能使用 Sass 老語法規(guī)則（縮進規(guī)則），“.scss”使用的是 Sass 的新語法規(guī)則，也就是 SCSS 語法規(guī)則（類似 CSS 語法格式）。

Sass 編譯

常常有人會問，使用 Sass 進行開發(fā)，那么是不是直接通過“<link>”引用“.scss”或“.sass”文件呢？

那么這里告訴大家，在項目中還是引用“.css”文件，Sass 只不過是做為一個預處理工具，提前幫你做事情，只有你需要時候，他才有攻效。

這樣一來，也就有了這章需要介紹的內(nèi)容—— Sass 的編譯。因為 Sass 開發(fā)之后，要讓 Web 頁面能調(diào)用 Sass 寫好的東西，就得有這么一個過程，這個過程就稱之為 Sass 編譯過程。Sass 的編譯有多種方法：

命令編譯
GUI工具編譯
自動化編譯

命令編譯

命令編譯是指使用你電腦中的命令終端，通過輸入 Sass 指令來編譯 Sass。這種編譯方式是最直接也是最簡單的一種方式。因為只需要在你的命令終端輸入：

單文件編譯：

sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

這是對一個單文件進行編譯，如果想對整個項目所有 Sass 文件編譯成 CSS 文件，可以這樣操作：

多文件編譯：

sass sass/:css/

上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，并且將這些 CSS 文件都放在項目中“css”文件夾中。

缺點及解決方法：

在實際編譯過程中，你會發(fā)現(xiàn)上面的命令，只能一次性編譯。每次個性保存“.scss”文件之后，都得重新執(zhí)行一次這樣的命令。如此操作太麻煩，其實還有一種方法，就是在編譯 Sass 時，開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監(jiān)測到代碼的變化，并且給你直接編譯出來：

sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

當然，使用 sass 命令編譯時，可以帶很多的參數(shù)：

參數(shù)

watch 舉例：

來看一個簡單的示例，假設(shè)我本地有一個項目，我要把項目中“bootstrap.scss”編譯出“bootstrap.css”文件，并且將編譯出來的文件放在“css”文件夾中，我就可以在我的命令終端中執(zhí)行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令終端就能監(jiān)測，并重新編譯出文件：

實時

常見的編譯錯誤

在編譯 Sass 代碼時常常會碰到一些錯誤，讓編譯失敗。這樣的錯誤有系統(tǒng)造成的也有人為造成的，但大部分都是人為過失引起編譯失敗。

而最為常見的一個錯誤就是字符編譯引起的。在Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創(chuàng)建 Sass 文件時，就需要將文件編碼設(shè)置為“utf-8”。

另外一個錯誤就是路徑中的中文字符引起的。建議在項目中文件命名或者文件目錄命名不要使用中文字符。而至于人為失誤造成的編譯失敗，在編譯過程中都會有具體的說明，大家可以根據(jù)編譯器提供的錯誤信息進行對應(yīng)的修改。

不同樣式風格的輸出方法

眾所周知，每個人編寫的 CSS 樣式風格都不一樣，有的喜歡將所有樣式代碼都寫在同一行，而有的喜歡將樣式分行書寫。在 Sass 中編譯出來的樣式風格也可以按不同的樣式風格顯示。其主要包括以下幾種樣式風格：

• 嵌套輸出方式 nested
• 展開輸出方式 expanded
• **緊湊輸出方式 compact **
• 壓縮輸出方式 compressed

嵌套輸出方式 nested

1、嵌套輸出方式 nested
Sass 提供了一種嵌套顯示 CSS 文件的方式。例如

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在編譯的時候帶上參數(shù)“ --style nested”:

       sass --watch test.scss:test.css --style nested

編譯出來的 CSS 樣式風格：

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none; }
    nav li {
      display: inline-block; }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none; }

效果圖：

對比圖

展開輸出方式 expanded

2、展開輸出方式 expanded
在編譯的時候帶上參數(shù)“ --style expanded”:

     sass --watch test.scss:test.css --style expanded

這個輸出的 CSS 樣式風格和 nested 類似，只是大括號在另起一行，同樣上面的代碼，編譯出來：

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }

效果圖：

對比圖

緊湊輸出方式 compact

3、緊湊輸出方式 compact

在編譯的時候帶上參數(shù)“ --style compact”:

sass --watch test.scss:test.css --style compact

編譯出來的 CSS 樣式風格：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

效果:

對比圖

壓縮輸出方式 compressed

4、壓縮輸出方式 compressed

在編譯的時候帶上參數(shù)“ --style compressed”:

  sass --watch test.scss:test.css --style compressed

壓縮輸出方式會去掉標準的 Sass 和 CSS 注釋及空格。也就是壓縮好的 CSS 代碼樣式風格：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

效果圖:

對比圖

Sass 的調(diào)試

演示圖：

調(diào)試

Sass 調(diào)試一直以來都是一件頭痛的事情，使用 Sass 的同學都希望能在瀏覽器中直接調(diào)試 Sass 文件，能找到對應(yīng)的行數(shù)。值得慶幸的是，現(xiàn)在實現(xiàn)并不是一件難事，只要你的瀏覽器支持“sourcemap”功能即可。早一點的版本，需要在編譯的時候添加“--sourcemap” 參數(shù)：

sass --watch --scss --sourcemap style.scss:style.css

在 Sass3.3 版本之上（我測試使用的版本是 3.4.7），不需要添加這個參數(shù)也可以：

sass --watch style.scss:style.css   

在命令終端，你將看到一個信息：

>>> Change detected to: style.scss  write style.css  write style.css.map

這時你就可以像前面展示的 gif 圖一樣，調(diào)試你的 Sass 代碼。