帽帽原本是個網頁設計,從國中自學html、工作時學了css後,發現自已似乎很喜歡語法這種東西,尤其是自已土法練鋼,用手打出來的感覺讓帽帽更愛。原本是網頁設計師,後來面試前端的工作上了後,帽帽也開始了RD的工作方式。

 

今天要來介紹的是SASS, SASS是近期出現,用來管理、編寫專案很好用的一個framework

投影片1.JPG

投影片2.JPG

投影片3.JPG

目前有compass、sass、scss、css,相信大家跟我一樣有點霧煞煞,帽帽轉錄Muki Space的圖再加上實用後的了解,製成了這張圖,其實寫scss跟寫css沒什麼分別,帽帽覺得都要使用framework來編寫專案了,當然要使用可擴充性高的compass來編寫sass

投影片4.JPG

投影片5.JPG

使用compass來編寫sass有兩種方法,一是用Fire.app、二是用Ruby,因為fire.app已經停止更新,加上帽帽的習慣是土法練鋼,不依靠軟體,所以選了相對穩定的 Ruby

投影片6.JPG

帽帽原本編寫網頁是用sublime 3  所以用sublime來寫sass的流程就是先裝好 sublime 3 再裝 Ruby ,用 Ruby 安裝compass、sass後,再用 sublime 安裝sass的套件,之後就可以開始使用了。

投影片7.JPG

上面左邊指的是sass資料夾左邊會有的sass檔案,右邊藍色框指的是在主要all.sass中 @import 進左邊的sass檔,要注意的是 要被@import進來的檔案是有 底線的,意思是有底線的sass檔不會被watch轉譯出css檔,所以左邊的資料夾共只會watch出一個all.css。

投影片8.JPG

sass中被很多人說用了就回不去的功能除了@import 外還@mixin函式、@extend、@variable變數功能,想要sass功力變很深的人要記得重點研究這幾個功能。

投影片9.JPG

sass還有其它一些framework的套件可以使用,rest 、css3、跟動畫animate後續再接著介紹。

這頁的圖片如果很不清楚,可以到這裡下載原始檔的PDF。

 

,

螺絲帽帽/記錄者 發表在 痞客邦 PIXNET 留言(0) 人氣()