sass學習筆記（一）：sass在windows下的安裝、編譯

標籤：sass   安裝   sass編譯   

一、sass在windows下的安裝

在 Windows 平台下安裝 Ruby 需要先有 Ruby 安裝包，可以在這裡下載:

https://www.ruby-lang.org/en/downloads/

Ruby 安裝檔案下載好後，可以按應用軟體安裝步驟進行安裝 Ruby。

Ruby 安裝完成後，在開始菜單中找到新安裝的 Ruby，並啟動 Ruby 的 Command 控制台Start Command Prompt with Ruby。接下來就可以安裝 Sass 了。

1、通過命令安裝 Sass

開啟電腦的命令終端，輸入下面的命令：

gem install sass

提醒一下，在使用 Mac 的同學，可能需要在上面的命令前加上"sudo"，才能正常安裝：

sudo gem install sass

如果上面的方法沒有安裝成功，可以使用下面的兩種方法。

   2、通過 Compass 來安裝 Sass

除了使用 gem 命令來安裝 Sass 之外，還可以通過安裝 compass來安裝 Sass，因為 Compass 是基於 Sass 開發的一個架構。也就是說，你安裝了 Compass，也就同時安裝好了 Sass。

同樣的在你的命令終端輸入下面的命令：

sudo gem install sass

執行完上面的命令之後，就開始安裝 Compass 和 Sass。

註：Compass 是一個成熟的、基於 Sass 開發的一個架構，這裡面整合了很多寫好的 mixins 和 Sass 函數。不過在此暫不做過多闡述。

   3、本地安裝 Sass

由於有時候直接使用上面的命令安裝會讓你無法正常實現安裝（網路受限原因），當碰到這種情況之時，那麼安裝需要特殊去處理，可以通過下面的方法來實現 Sass 的正常安裝：

可以到 Rubygems(http://rubygems.org/) 網站上將 Sass 的安裝包（http://rubygems.org/gems/sass）下載下來，然後在命令終端輸入：

gem install <把下載的安裝包拖到這裡>

直接斷行符號即可安裝成功。

註：在 iOSX 系統平台，可以直接將下載的安裝包拖到 "gem install" 後面，如果在是 Windows 系統，需要手功輸入安裝的檔案路徑。

二、sass在的查測、更新、卸載

在命令列Start Command Prompt with Ruby中，輸入命令：

sass -v                  查測

gem update sass         更新sass

gem uninstall sass         卸載sass

scss是sass的新文法格式，可縮排，可以帶大括弧、分號，與sass不同的是書寫格式和副檔名不同。

三、sass的編譯

1、命令列編譯：

單檔案編譯：     sass   <輸入路徑>/style.scss:<輸出路徑>/style.css

多檔案編譯：     sass sass/:css/

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

命令列中watch功能:

來看一個簡單的樣本，假設我本地有一個項目，我要把項目中“bootstrap.scss”編譯出“bootstrap.css”檔案，並且將編譯出來的檔案放在“css”檔案夾中，我就可以在我的命令終端中執行：

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

一旦我的 bootstrap.scss 檔案有任何修改，只要我重新儲存了修改的檔案，命令終端就能監測，並重新編譯出檔案。

2、GUI介面工具編譯

推薦Koala、Codekit這兩個視覺化檢視編譯，具體可網上下載。

3、自動化編譯

Grunt、Gulp能自動編譯。

sass學習筆記（一）：sass在windows下的安裝、編譯