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文件会实时编译，而后体现到浏览器中。