SCSS語法格式及編譯調試

一、SASS編譯

Sass 的編譯有多種方法：

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

1.1 命令編譯

1）單文件編譯

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

2）多文件編譯

sass sass/:css/

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

3）watch功能

這樣只要你的代碼進行任保修改，都能自動監測到代碼的變化，並且給你直接編譯出來：

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

1.2 GUI界面工具編譯

1.3 自動化編譯（Grunt&GULP）

1.4 常見的編譯錯誤

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

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

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

 

二、不同樣式風格

在 Sass 中編譯出來的樣式風格也可以按不同的樣式風格顯示。其主要包括以下幾種樣式風格：

1. 嵌套輸出方式 nested
2. 展開輸出方式 expanded  
3. 緊湊輸出方式 compact 
4. 壓縮輸出方式 compressed

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

在編譯的時候帶上參數“ --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; }

 

2.2 SASS展開輸出方式

 

同樣的輸入例子2.1

在編譯的時候帶上參數“ --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;
}

 

2.3 嵌套輸出方式 compact

在編譯的時候帶上參數“ --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; }

 

2.4 壓縮輸出方式 compressed

 在編譯的時候帶上參數“ --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}

一段時間之后，你實際上就不再需要寫 CSS 代碼了，只用寫 Sass 代碼。在這種情況下，你只需要設定輸出格式為壓縮格式，知道輸出的 CSS 代碼可以直接使用即可。

 

三、SASS調試

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

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

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

sass --watch style.scss:style.css

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

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

這時你就可以像下面展示的 gif 圖一樣，調試你的 Sass 代碼。