前端的小伙伴們有福利啦Ｋ×酢ｇ突选！
? ? ? ? ?什么雪营？聽說弓千！css樣式還可以被編譯執(zhí)行了。學(xué)過前端的小伙伴都知道献起，css樣式是用來修飾網(wǎng)頁頁面結(jié)構(gòu)的洋访，說白了，它壓根就算不上一門編程語言谴餐，和js相比姻政，css所能做的事可就弱爆了，（ajax和node的出現(xiàn)讓js越來越靠近一門服務(wù)端編程語言）岂嗓。在web1.0時(shí)代汁展，css就是用來做頁面模板的，純屬于設(shè)計(jì)類厌殉。不在開發(fā)的范疇......
? ? ? ? ? ?直到sass的出現(xiàn)食绿，sass是個(gè)什么東西呢！上個(gè)世紀(jì)90年代有個(gè)日本佬開發(fā)出了一門名為Ruby的開發(fā)語言公罕，它是一種服務(wù)端開發(fā)語言器紧。這種語言出現(xiàn)之后的一段時(shí)間里，出現(xiàn)了不少圍繞著ruby打轉(zhuǎn)的框架楼眷，我們的sass就是其中之一铲汪，如此說來我們這個(gè)強(qiáng)大的css編譯平臺(tái)就是用ruby開發(fā)的，所以后面在開發(fā)編寫sass文件時(shí)罐柳，我們需要安裝ruby編譯環(huán)境掌腰，然后安裝ruby包gem中的sass模塊，其實(shí)sass就像是css的虛擬機(jī)一樣张吉，它可以將強(qiáng)類型的css文件（后綴名是.sass或者.scss的css文件）編譯成可以渲染頁面的“正規(guī)”的css文件齿梁。厲害了，我的css. 以前只聽過js的虛擬機(jī)——瀏覽器（或者node.js）肮蛹，java的虛擬機(jī)——jvm勺择，安卓的虛擬機(jī)——dvm（和ART）.從來沒聽過小小的css現(xiàn)在也變得越來越強(qiáng)。等等蔗崎，這么說來酵幕！以后前端寫css就可以像js那樣定義變量扰藕，函數(shù)缓苛，調(diào)用方法，定義數(shù)據(jù)類型，什么繼承啊未桥，封裝啊都跑到css上面來了笔刹。這么說來，css也想一統(tǒng)武林冬耿，稱霸編程語言排行版舌菜？這個(gè)......額..貌似不妥吧！......有待商榷......
題外話不多扯亦镶，下面就帶大家走進(jìn)SASS的門檻日月，門檻不高，君需仔細(xì)
? ? ? ? ? 第一步：工欲善其事必先利其器缤骨，當(dāng)然是編寫sass時(shí)環(huán)境搭建了爱咬，首先需要去ruby的官網(wǎng)下載ruby安裝包，網(wǎng)上一搜一大堆绊起，這里我也給大家提供了百度云分享（密碼:s3y2 ） Ruby安裝包 ? ?
下載之后一步一步安裝完成精拟，接著安裝ruby的包管理器gem中的一個(gè)重要的模塊（美其名曰：sass的依賴環(huán)境）——sass-3.4.22.gem（這里只是某個(gè)版本）如何安裝這個(gè)東東呢，如果你覺得你的網(wǎng)速夠可以的話虱歪，那不多說蜂绎，直接上DOS命令行:gem install sass
但是我們的網(wǎng)速慢的可以，那么也別急笋鄙，在這里我也給大家提供了已經(jīng)下載好的sass模塊师枣，點(diǎn)擊大鏈接 ?http://pan.baidu.com/s/1o8HEZWI ?下載即可，注意此時(shí)安裝有些不一樣局装，要在你命令行中敲入gem install (空格)之后再將你下載好的sass文件路徑粘貼在此坛吁，最后敲下回車鍵，說白了铐尚，就是安裝（install）你已經(jīng)下載好的sass拨脉，而不需要在網(wǎng)速慢的情況下去國(guó)外服務(wù)器上下載模塊（要是你懂得翻墻也是可以的噢）。以上兩個(gè)東西裝好之后宣增，該檢驗(yàn)了玫膀。在命令行中敲下ruby -v，出現(xiàn)版本號(hào)爹脾，對(duì)勾帖旨。敲下gem -v,出現(xiàn)版本號(hào)，對(duì)勾灵妨。
? ? ? ? ?第二步：環(huán)境搭建好了解阅，那就開始我們的第一個(gè)Hello World“”吧
在你的目錄下新建一個(gè)項(xiàng)目文件，在css文件夾里新建一個(gè).scss文件（前面說過.scss和.sass都是SASS文件泌霍，二者的區(qū)別在于：.sass后綴名的是在SASS3.0之前的版本中使用的货抄，其代碼書寫格式由于沒有花括號(hào)和分號(hào)，而且需要做到完美的退格形式，所以不符合css書寫規(guī)范而不被廣為接受蟹地。 .scss后綴名的是SASS3.0之后一直很流行的格式积暖，代碼書寫有花括號(hào),分號(hào)等等，完全符合原生css格式）如圖所示：
你的.scss里就是你要寫的css代碼怪与，只不過夺刑，這一次我們寫的css有了變量，方法分别，賦值等等一大堆只有強(qiáng)類型語言才有的遍愿，你可以給css的屬性（或?qū)傩灾担┒x成一個(gè)變量，然后對(duì)它賦值耘斩，在花括號(hào)里該怎樣寫·css還是怎樣寫
html頁面的簡(jiǎn)單結(jié)構(gòu)如下圖
SASS頁面（.scss后綴名的）如下圖
你的小demo寫完了嘛错览，好！關(guān)鍵的一步來啦
進(jìn)入dos命令行cd到你的項(xiàng)目文件所在路徑下煌往，我的是sassdemo.然后敲下如下命令
演示：如下圖
接著你會(huì)在你的項(xiàng)目文件（sassdemo）里的css文件夾下看到多出來這3個(gè)文件（map文件也很重要哦）如下圖
沒錯(cuò)dos命令行里敲命令就將你寫好的.scss文件編譯成“正規(guī)”的css文件啦倾哺。編譯后的css文件里內(nèi)容這這樣的，如下圖
好了刽脖，一個(gè)小小的SASS編譯小案例結(jié)束了
總結(jié)：所謂的SASS就是另一種形式的css文件羞海，只不過在這種形式的SASS（.scss常用）文件里，你可以將css擴(kuò)展開來去寫曲管，可以將編程語言的語法運(yùn)用到css中却邓。一般，我們編譯之后的.scss文件會(huì)形成4中格式的css文件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?expanded （擴(kuò)展格式）——常用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?compact ?（緊湊格式）——常用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nested ? （嵌套格式）——不常用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?compressed（壓縮格式）——不常用（項(xiàng)目上線時(shí)用）
SASS編程里除了變量院水，有一個(gè)重要的內(nèi)容——關(guān)于“函數(shù)”方面
? ? ? ? ? ?官方專業(yè)稱其為：混合
