大話css預編譯處理（二）安裝使用篇

時間 2019-11-15

標籤大話 css 編譯處理安裝使用欄目 CSS 简体版

原文原文鏈接

1、Sass、LESS和Stylus的安裝

1.Sass的安裝

Sass是Ruby語言寫的，可是二者的語法沒有關係。不懂Ruby，照樣能夠正常使用Sass。只是必須先安裝Ruby，而後再安裝Sass。首先安裝Ruby，若是你使用的是IOS系統，那麼你的系統已經安裝好了Ruby。若是你使用的是微軟的Windows系統，那麼安裝就有些許的麻煩。不過也不用過於擔憂，按照下面的步驟就能幫你快速的安裝好。

到RubyInstaller官網上下載Ruby安裝文件（隨意選擇一個版本），此處選擇的是最新版本Ruby1.9.3-p385：

Ruby安裝文件下載好後，能夠按應用軟件安裝步驟進行安裝Ruby。在安裝過程當中，我的建議將其安裝在C盤下，在安裝過程當中選擇第二個選項，以下圖所示：

Ruby安裝完成後，在開始菜單中找到新安裝的Ruby，並啓動Ruby的Command控制面板，以下圖所示：

在啓動的Ruby命令控制面板中輸入下面的命令：gem install sass
輸入上面命令，回車後就會自動安裝Sass：

這樣Sass就安裝成功了，也就可使用了。javascript

2.LESS的安裝

LESS的安裝和Sass安裝有所不一樣，他不須要依賴於Ruby環境，就能直接安裝使用。不過LESS安裝分爲兩種：客戶端和服務器端安裝。

a)客戶端安裝：

咱們能夠直接在客戶端使用「.less」（LESS源文件），只須要在官網載一個Javascript腳本文件主「less.js」，而後在咱們須要引入LESS源文件的HTML的<head>中加入以下代碼：css

<link rel="stylesheet/less" type="text/css" href="文件路徑/styles.less">
<script src="文件路徑/less.js" type="text/javascript"></script>

須要注意的是：在引入「.less」文件中，「link」的「rel」屬性要設置爲「stylesheet/less」。還有更重要的一點須要注意的是：LESS源文件必定要在「less.js」引入以前引入，這樣才能保證LESS源文件正確編譯解析。前端

b)服務器端安裝

LESS在服務器端的使用主要是藉助於LESS的編譯器，將LESS源文件編譯生成最終的CSS文件，目前經常使用的方式是利用node的包管理器（npm）安裝LESS，安裝成功後就能夠在Node環境中對LESS文件進行編譯。如此一來，LESS在服務器的安裝和Sass的安裝有點類似，不一樣之處是他們需依賴的環境不同，LESS須要的是Node JS環境，而Sass須要的是Ruby環境，爲了讓你們能更清晰的知道如何在服務器端安裝LESS，此處簡單的過一下安裝過程（本文演示的是在Window7下的安裝方法）。java

首先到Node Js的官網下載一個適合Windows系統的安裝文件，此處下載的是「node-v0.8.20-x86.msi」：

安裝文件下載後，按正常應用程序方法同樣安裝。安裝完成後在開始菜單中啓用Node js的Command控制面板：

在啓動的Node Js的Command控制面板直接輸入下面的命令：npm install less

這樣就安裝完LESS的編譯命令，能夠在本地正常編譯LESS源文件。若是您想下載最新穩定版本的LESS，還能夠嘗試在Node JS的Command控制面板輸入：npm install less@latest

3.Stylus的安裝

Stylus的安裝和LESS在服務器端的安裝很類似，一樣依賴於Node JS的環境，也就是說也要先安裝Node Js（若是安裝Node JS請參考前面的介紹）。惟一不一樣的是在Node JS的Command控制面板輸入的命令不同： npm install stylus
而後，就會自動下載安裝最新的stylus庫：

這樣就算是安裝完Stylus了，也能夠正常使用Stylus。node

2、Sass、LESS和Stylus轉譯成CSS

Sass、LESS和Stylus源文件（除了LESS源文件在客戶端下運行以外）都不能直接被瀏覽器直接識別，這樣一來，要正常的使用這些源文件，就須要將其源文件轉譯成瀏覽器能夠識別的CSS樣式文件，這也是使用CSS預處理器很關鍵的一步，若是這一步不知道如何操做，那麼意味着寫出來的代碼不可用。接下來按一樣的方式，分別來看看三者之間是如何將其源文件轉譯成所須要的CSS樣式文件。

1.Sass源文件轉譯成CSS文件

Sass文件就是普通的文本文件，不過其文件後綴名有兩種，一種爲「.sass」；另外一種爲「.scss」。咱們通常用「.scss」就好，至於這兩種文件擴展名的區別在於「.sass」是Sass語言文件的擴展後綴名，而「.scss」是SCSS語言文件的擴展後綴名，至於Sass和SCSS的詳細區別這裏不作介紹。你能夠簡單的理解爲他們都是CSS預處理器語言，並且二者功能特性都同樣，只是書寫規則不一樣而以。

要轉譯Sass文件的前提是有文件可轉，所以先在項目中建立一個Sass文件，此例中將其命名爲「style.scss」，而且將其放在對應的項目樣式中，如D盤的「www/workspace/Sass/css」目錄下。
啓動Ruby的Command控制面板，找到須要轉譯的Sass文件，如此例此文件放置在D盤的「www/workspace/Sass/css」目錄下：
若是僅針對於單文件的轉譯，須要將「style.scss」轉譯成「style.css」，只須要在對應的目錄下輸入下面的命令：sass style.scss style.css
這樣本來在D盤的「www/workspace/Sass/css」目錄下只有「style.scss」這個文件，如今增長了一個「style.css」文件，而這個CSS文件咱們就能夠用來調用，他也就是「style.scss」轉譯出來的樣式文件。固然，咱們不可能每保存一次這個Sass文件就來執行一回這個轉譯命令。那麼有沒有更好的辦法實現呢？回答是確定的，能夠經過下面的監聽命令實現，這樣一來只要Sass文件作了修改，就會自動更新對應的CSS樣式文件。
單文件的監聽，只須要在剛纔的命令控制面板中輸入：sass --watch style.scss:style.css
按下回車鍵（Enter）,就會看到下面的提示信息：
看到上圖所示的提示信息就表示監聽成功，這樣一來，你只要修改了「style.scss」文件，「style.css」文件就會隨着更新變化。
對於一個項目而言，不太可能只有一個CSS樣式文件，若是有多個Sass文件須要監聽時，就頗有必要的組織一下。默認狀況之下，我喜歡把全部的Sass文件放在「/css/sass」目錄中，而生成的CSS文件則直接放在「/css」目錄下。如今咱們修改一下項目文件目錄結構，在「/css」目錄中再建立一個「sass」目錄，並找剛纔建立的「style.scss」文件移至「/css/sass」目錄下。此時監聽「css/sass」下的全部Sass文件時，能夠在命令面板中輸入以下格式的命令：sass --watch sassFileDirectory:cssFileDirectory
在本例中，冒號前面的「sassFileDirectory」是指「/css/sass」下的「sass」目錄，冒號後面的「cssFileDirectory」是指「css」目錄，對應的命令就是：sass --watch css/sass:css
回車後，一樣能夠獲得提示信息：
除了使用Ruby的Command控制面板轉譯Sass以外還能夠考慮第三方工具，好比說有名的Compass.app和fire.app。

2.LESS文件的轉譯成CSS文件

LESS文件的轉譯和Sass文件轉譯能夠說是大同小異，不一樣之處是LESS在安裝的Node JS環境下經過其本身的命令來進行轉譯。

lessc style.less
上面的命令會將編譯的CSS傳遞給stdout，你能夠將它保存到一個文件中：
lessc style.less > style.css
除了上面的命令轉譯LESS源文件以外，如今還有不少第三方開發的工具，例如koloa,koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。具體使用能夠參考官網：http://koala-app.com/linux

3.Stylus源文件轉譯成CSS文件

Stylus具備可執行性，所以Stylus能將自身轉換成CSS。Stylus能夠讀取自「stdin」輸出到「stdout」，所以Stylus能夠像下面轉譯源文件：
stylus –compress <some.styl> some.css
Stylus也像Sass同樣，同時接受單個文件和整個目錄的轉譯。例如，一個目錄名爲「css」將在同一個目錄編譯並輸出「.css」文件。
stylus css
下面的命令將輸出到「./public/stylesheets」：
stylus css –out public/stylesheets
還能夠同時轉譯多個文件：
stylus one.styl two.styl
若是你的瀏覽器安裝了Firebug，那麼可使用FireStylus擴展。
stylus –firebug <path>