sass(scss)的安裝與使用教程

CSS預(yù)編譯器有 SASS LESS Stylus等等,SCSS是SASS3引入的新語法。那為什么要選擇SCSS呢?那我只能說我喜歡?。〔还躍ASS也好,LESS也罷,還是Stylus都只是一種工具,各有各的優(yōu)缺點(diǎn),選擇自己喜歡的用著舒服的就是了。沒必要糾結(jié)這么多。
準(zhǔn)備工作(注意:這是windows平臺下的安裝)
- Ruby
- SASS
1.1 安裝
SASS是Ruby語言寫的,但是兩者的語法沒有關(guān)系。所以不懂Ruby,一樣可以使用。只是必須先安裝Ruby,然后再安裝SASS。
根據(jù)自己系統(tǒng)的位數(shù)(64 OR 32)選擇合適的安裝包,下載安裝包之后雙擊打開,一路下一步,完成!
打開ruby的控制臺,輸入ruby -v
,如果出現(xiàn)以下結(jié)果,則證明ruby安裝成功!
ruby -v
安裝完ruby之后,直接在控制臺就可以安裝SASS。
gem install sass
至此,SCSS安裝完畢!
1.2 使用
SASS文件就是普通的文本文件,里面可以直接使用CSS語法。文件后綴名是.scss,意思為Sassy CSS。
下面的命令,可以將.scss文件轉(zhuǎn)化的css代碼并保存到一個(gè)新文件中。(假設(shè)文件名為app。)
sass app.scss app.css
SASS提供四種編譯風(fēng)格的選項(xiàng):
nested:嵌套縮進(jìn)的css代碼,它是默認(rèn)值。 expanded:沒有縮進(jìn)的、擴(kuò)展的css代碼。 compact:簡潔格式的css代碼。 compressed:壓縮后的css代碼。
編碼風(fēng)格自行設(shè)置,用一次就知道了嘛。
1.3 安裝KoalaKoala
Koala是一款圖形化界面的編譯軟件,支持Sass Less CoffeeScript
的編譯。官網(wǎng)下載直接安裝,不過需要依賴于Ruby。具體安裝就不做介紹了。
以上所述是小編給大家介紹的sass(scss)的安裝與使用教程,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
- 這篇文章主要介紹了CSS的Sass框架中常用的操作符的使用教程,整理了一些基本的邏輯操作符和字符串操作符等的翻譯和用法,需要的朋友可以參考下2016-03-08
- 這篇文章主要介紹了CSS框架sass的簡單一覽,像嵌套屬性和運(yùn)算符等主要特性都在文中有簡單的介紹,需要的朋友可以參考下2015-07-20
- 這篇文章主要介紹了CSS的SASS樣式編程指南,包括對于嵌套器和注釋的使用等方面,需要的朋友可以參考下2015-07-12
學(xué)習(xí)CSS預(yù)處理器:Sass和less進(jìn)行對比
Css可以讓你做很多事情,但它畢竟是給瀏覽器認(rèn)的東西,對開發(fā)者來說,Css缺乏很多特性2012-07-11