ionic開發之使用sass

sass 是一個css的預編譯器，常見的預編譯器有less,sass,stylus等，目前sass彷佛更受青睞一些，bootstrap的最新版本以及ionic 都是用sass來構建頁面效果的。這篇文章講解如何在ionic工程使用sass，以及淺層次的分析一下ionic是如何構建sass代碼的。

使用Sass

首先要安裝Python，和npm install -g gulp

在工程文件夾中輸入以下命令

$ ionic setup sass

這一步爲咱們的工程添加sass支持,以後咱們能夠在./scss/ionic.app.scss編寫css代碼。若是安裝有問題，嘗試調整node 版本，我使用4.1版本的node出錯，切回0.12.7成功.

sass代碼構建過程

ionic 使用gulp這個構建工具來預編譯sass，咱們輸入setup sass命令的時候ionic會添加gulp-sass等gulp插件，而後在ionic.project文件中添加"gulpStartupTasks"項,在啓動的時候增長gulp任務,sass和watch。

這兩個任務一個是用來編譯sass文件，一個是用來監控sass文件，一有改動就從新編譯，以適配liveload，下面是gulpfile.js的有關配置

能夠看到sass任務會將源文件爲'./scss/ionic.app.scss'的代碼用sass插件編譯以後寫入到'./www/css/'文件夾中(ionic.app.css)，而後再將該文件用minifyCss插件進行最小化,重命名爲ionic.app.min.css,而後寫入到./www/css/中。
最後，在www/index.html會加載該css:

在咱們輸入ionic serve 命令的時候也會開啓gulp任務，修改ionic.app.scss文件會實時編譯，而後體現到瀏覽器中。