sass簡單入門學習

安裝ruby的時候記得勾選add ruby executables to your path，直到 ruby 安裝程式完成 ruby 安裝為止。如果您的安裝沒有適當地配置環境變數，接下來您可能需要進行環境變數的配置。

安裝完ruby之後,cmd終端執行,

ruby -v

如果有版本號就說明安裝成功了。之後通過命令列安裝:

gem install sass

安裝完成之後

sass -v

檢視下版本號如果和ruby的版本號一樣就成功了，此刻安裝工作環境工作就準備好了。

我的個人檔案目錄,僅供參考

在sass資料夾中建立style.scss檔案

body

style.scss寫完之後，cmd中進入**根目錄資料夾；我的根目錄檔案集是e:\liwei-sass,在此目錄執行命令(下面做個特別的演示，以防止你弄錯目錄，後面的目錄和以下的一樣，就不做重複操作了)

e:\liwei-sass>sass sass/style.scss:sass/style.css

此時css資料夾中就會生成乙個style.css的**，就是由scss檔案編譯好的css檔案。（提個醒：編譯之前css資料夾是空的，執行上面的命令之後，會自動生成對style.scss的轉移成style.css）

如果想要執行監視功能，就是儲存檔案之後就可以直接看見**編譯scss成css的效果，那就在liwei-sass處執行即可.

sass –watch sass:css

此刻,只要style.scss 輸入乙個css的屬性之後,直接ctrl+s 儲存,style.css的**就會跟著進行改變。做到了實時編譯的效果，節省開發時間、提高開發效率。

如果你覺得上面的body**太簡單了,根本看不出來兩者都啥區別,下面我就寫乙個稍微複雜一點的,給你做參考,當你執行完這個**之後,理解sass的編譯就很容易了.好了不說了,直接上**

以下是style.scss的**部分:

ul}}

以下是編譯好之後style.css的**部分:

ul ulli ul lispan

這樣看起來是不是就知道了,sass的結構,看起來就清晰了許多吧.

為了讓你在視覺上有明顯直觀的感覺,下面在給你介紹幾種scss的輸出格式.

nested,巢狀

expanded,擴充套件

compact,緊湊

compressed,壓縮

第一種nested就是上面**展示的那樣.這裡舉乙個例子,就拿expanded來做演示.在終端執行

sass –watch sass:css –style expanded

（注：「-」是兩個,不是乙個）

編譯之後,style.css顯示的效果如下:

ul ulli ul lispan

這種css的格式你再熟悉不過了吧。其他幾個樣式如果你想看看效果，可自行執行命令即可。