慕課學習筆記分享：

　　　CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作。

　　　　通俗的說，“CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然後再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡單的邏輯程序、函數（如右側代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

Sass官網描述：

Sass 是一門高於 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有著比普通 CSS 更加強大的功能。
Sass 能夠提供更簡潔、更優雅的語法，同時提供多種功能來創建可維護和管理的樣式表。

Sass 和 SCSS 有什麽區別？

Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：

1. 文件擴展名不同，Sass 是以“.sass”後綴為擴展名，而 SCSS 是以“.scss”後綴為擴展名
2. 語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

示例：

Sass 語法

$font-stack: Helvetica, sans-serif  //定義變量
$primary-color: #333 //定義變量

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

SCSS 語法

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

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

編譯出來的 CSS

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

Sass 和 CSS 寫法有差別：

Sass 和 CSS 寫法的確存在一定的差異，由於 Sass 是基於 Ruby 寫出來，所以其延續了 Ruby 的書寫規範。在書寫 Sass 時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的。如：

Sass寫法：

body
  color: #fff
  background: #f36

而在 CSS 我們是這樣書寫：

body{
  color:#fff;
  background:#f36;
}

SCSS 和 CSS 寫法無差別：

SCSS 和 CSS 寫法無差別，這也是 Sass 後來越來越受大眾喜歡原因之一。簡單點說，把你現有的“.css”文件直接修改成“.scss”即可使用。

css預處理器之一---sass(一)