Sass指南：Sass前世此生和如何安裝以及使用Webstorm直接支持編寫

Sass簡易指南

 

什麼是Css預處理器？

 

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

 

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

 

CSS 預處理器語言：

- Sass（SCSS）

- LESS

- Stylus

- Turbine

- Swithch CSS

- CSS Cacheer

- DT CSS

 

什麼是 Sass？

 

l  官方定義

Sass 是一門高於 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有着比普通 CSS 更增強大的功能。

Sass 可以提供更簡潔、更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。

 

l  Sass 前世此生

Sass 是最先的 CSS 預處理語言，有比 LESS 更爲強大的功能，不過其一開始的縮進式語法（Sass 老版本語法，後面課程會詳細介紹 ）並不能被大衆接受，不過因爲其強大的功能和 Ruby on Rails 的大力推進，仍是有不少開發者選擇了 Sass。

 

Sass 是採用 Ruby 語言編寫的一款 CSS 預處理語言，它誕生於2007年，是最大的成熟的 CSS 預處理語言。最初它是爲了配合 HAML（一種縮進式 HTML 預編譯器）而設計的，所以有着和 HTML 同樣的縮進式風格。

 

l  爲何Sass早期不如 LESS 普及？

雖然縮進式風格能夠有效縮減代碼量，強制規範編碼風格，但它一方面並不爲大多數程序接受，另外一方面沒法兼容已有的 CSS 代碼。這也是 Sass 雖然出現得最先，但遠不如 LESS 普及的緣由。

 

l  Sass 和 SCSS 有什麼區別？

Sass 和 SCSS 實際上是同一種東西，咱們平時都稱之爲 Sass，二者之間不一樣之處有如下兩點：

第一，文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名

第二，語法書寫方式不一樣，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(windows版)？

 

第一步：安裝ruby

 

在 Windows 平臺下安裝 Ruby首先須要有 Ruby 安裝包，你們能夠到 Ruby 的官網（http://rubyinstaller.org/downloads）下載對應須要的 Ruby 版本。

 

Ruby 安裝文件下載好後，按照應用軟件安裝步驟進行安裝。在安裝過程當中，我的建議將其安裝在 C 盤下，在安裝過程當中選擇第二個選項（不選中，就會出現編譯時找不到Ruby環境的狀況），以下圖所示：

 

當你的電腦安裝好 Ruby 以後，接下來就能夠安裝 Sass 了。

雖然在windows下安裝 Sass 有多種方法，可是這幾種方法都是很是的簡單，只須要在你的命令終端輸入一行命令便可。固然最好首先進入ruby的命令行模式，以下圖：

第二步：安裝Sass

 

1、經過命令安裝 Sass

打開ruby命令行，輸入以下指令:

執行gem install sass命令。

2. 經過Compass安裝Sass

除了使用 gem 命令來安裝 Sass 以外，還能夠經過安裝 compass來安裝 Sass，由於 Compass 是基於 Sass 開發的一個框架。也就是說，你安裝了 Compass，也就同時安裝好了 Sass。一樣的在你的命令終端輸入下面的命令：

執行gem install compass命令。

 

3. 經過淘寶鏡像安裝sass

除了下載 Sass 安裝包到本地安裝以外，碰到網絡緣由沒法安裝時還可使用淘寶 RubyGems 鏡像安裝 Sass。只是咱們須要經過 gem sources 命令來配置源，先移除默認的 https://rubygems.org 源，而後添加淘寶的源 https://ruby.taobao.org：

第一步：移除默認的源

gem sources --remove https://rubygems.org/

第二步：指定淘寶的源

gem sources -a https://ruby.taobao.org/

第三步：查看指定的源是否是淘寶源

gem sources -l

返回結果以下：

*** CURRENT SOURCES ***

https://ruby.taobao.org

請確保只有 ruby.taobao.org。若是無誤以後，執行下面的命令：

gem install sass

第三步：查測及更新Sass

 

查測Sass

經過上面的幾種方法均可以安裝 Sass，可是，咱們要如何確認本身是否安裝成功了呢？其實很簡單，只須要經過下面的命令便可：

sass -v

若是在你的命令終端能看到相似這樣的信息就表示你的電腦安裝已成功。也就是說能夠正常的使用 Sass 了。

 

更新 Sass

維護 Sass 的團隊會不斷的爲 Sass 添加新的功能，那麼如何確保本身已安裝的 Sass 也具備這些新的功能特性呢？不會是卸載了從新安裝吧（雖然安裝也就是一個命令的事情）？

 

其實不須要這麼麻煩，只須要在命令終端執行gem update sass 命令，這個時候你看到相似下面這樣的信息，表示你的 Sass 已更新到最新版本。

 

第四步：支持sass的開發環境設置

1. 讓sublime支持sass的開發

在sublime中使用 ctrl+shift+p 打開 PackageControl，而後輸入install 選擇第一項 Install Package，最後輸入sass 搜索sass的插件 安裝 Sass和 Sass Build兩個插件，以下圖所示:

 

sass插件支持sass的語法高亮顯示

sass build支持sass文件或者scss的自動編譯，能夠自動生成 css代碼，編譯快捷鍵ctrl+b

 

2. 使用Webstorm 能夠直接支持sass的編寫

 

Sass或者Scss文件的編寫和編譯

 

Sass 語法格式

這裏說的 Sass 語法是 Sass 的最初語法格式，他是經過 tab 鍵控制縮進的一種語法規則，並且這種縮進要求很是嚴格。另外其不帶有任何的分號和大括號。經常把這種格式稱爲 Sass 老版本，其文件名以「.sass」爲擴展名。

 

來看一個 Sass 語法格式的簡單示例。

 

假設咱們有一段這樣的 CSS 代碼：

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

 

如今用 Sass 的語法格式來編寫：

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

color: $primary-color

 

在整個 Sass 代碼中，咱們沒看到相似 CSS 中的大括號和分號。

注：這種語法格式對於前端人員都不太容易接受，並且容易出錯。

 

SCSS語法格式

SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是如出一轍，代碼都包裹在一對大括號裏，而且末尾結束處都有一個分號。其文件名格式經常以「.scss」爲擴展名。

 

一樣的這段 CSS 代碼：

body {

 font: 100% Helvetica, sans-serif;

 color: #333; }

 

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

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

 

body {

 font: 100% $font-stack;

 color: $primary-color;

}

 

這樣的語法格式對於從事前端工做的同窗來講更易於接受，這也是 SCSS 爲何更被前端人員青眯的緣由。

 

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

名不一樣，來看一個簡單的對比圖：

正由於如此，有很多同窗使用 Sass 新的語法規則，而文件擴展名依舊使用的是「.sass」，這也就形成血案了，編譯時說編譯不出來。

 

在此特別提醒新同窗：「.sass」只能使用 Sass 老語法規則（縮進規則），「.scss」使用的是 Sass 的新語法規則，也就是 SCSS 語法規則（相似 CSS 語法格式）。

特別注意：因爲sass編譯器的緣由，在編寫sass或者scss文件時必定要使用utf-8編碼，還有文件路徑中不能使用中文和特殊字符，不然在編譯成css文件時會出錯。若有同窗想與做者諮詢交流技術問題請加羣523916260。