CSS預編譯器有 SASS LESS Stylus等等,SCSS是SASS3引入的新語法。那為什么要選擇SCSS呢?那我只能說我喜歡啊!不管SASS也好,LESS也罷,還是Stylus都只是一種工具,各有各的優缺點,選擇自己喜歡的用着舒服的就是了。沒必要糾結這么多。
准備工作(注意:這是windows平台下的安裝)
- Ruby
- SASS
1.1 安裝
SASS是Ruby語言寫的,但是兩者的語法沒有關系。所以不懂Ruby,一樣可以使用。只是必須先安裝Ruby,然后再安裝SASS。
根據自己系統的位數(64 OR 32)選擇合適的安裝包,下載安裝包之后雙擊打開,一路下一步,完成!
打開ruby的控制台,輸入ruby -v,如果出現以下結果,則證明ruby安裝成功!
ruby -v
安裝完ruby之后,直接在控制台就可以安裝SASS。
gem install sass
至此,SCSS安裝完畢!
1.2 使用
SASS文件就是普通的文本文件,里面可以直接使用CSS語法。文件后綴名是.scss,意思為Sassy CSS。
下面的命令,可以將.scss文件轉化的css代碼並保存到一個新文件中。(假設文件名為app。)
sass app.scss app.css
SASS提供四種編譯風格的選項:
nested:嵌套縮進的css代碼,它是默認值。
expanded:沒有縮進的、擴展的css代碼。
compact:簡潔格式的css代碼。
compressed:壓縮后的css代碼。
編碼風格自行設置,用一次就知道了嘛。
1.3 安裝Koala
Koala是一款圖形化界面的編譯軟件,支持Sass Less CoffeeScript的編譯。官網下載直接安裝,不過需要依賴於Ruby。具體安裝就不做介紹了。