sass 是一個(gè)css的預(yù)編譯器，常見(jiàn)的預(yù)編譯器有l(wèi)ess,sass,stylus等，目前sass似乎更受青睞一些，bootstrap的最新版本以及ionic 都是用sass來(lái)構(gòu)建頁(yè)面效果的。這篇文章講解如何在ionic工程使用sass，以及淺層次的分析一下ionic是如何構(gòu)建sass代碼的。
使用Sass
在工程文件夾中輸入如下命令
$ ionic setup sass
這一步為我們的工程添加sass支持,之后我們可以在./scss/ionic.app.scss編寫css代碼。如果安裝有問(wèn)題，嘗試調(diào)整node 版本，我使用4.1版本的node出錯(cuò)，切回0.12.7成功.
下面嘗試使用sass改變默認(rèn)的positive顏色效果,以及增加$big-bg變量，代表背景，然后添加.scroll-bg類，為滾動(dòng)頁(yè)面添加背景圖片,以下為./scss/ionic.app.scss中的代碼，注意，自定義的效果添加在最后一行加載ionic庫(kù)之前。
/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.
For example, you might change some of the default colors:
$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: #444 !default;
*/
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;
$positive: #057b6c !default;
$big-bg: 'http://ioniconf.com/img/bg.jpg';
.scroll-bg {
background: url($big-bg) no-repeat center center fixed;
background-size: cover;
}
// Include all of Ionic
@import "www/lib/ionic/scss/ionic";
對(duì)應(yīng)的html代碼:
<ion-view view-title="Search" >
<ion-content class="padding scroll-bg">
<h1 class="positive">Search</h1>
</ion-content>
</ion-view>
效果如下:
sass代碼構(gòu)建過(guò)程
ionic 使用gulp這個(gè)構(gòu)建工具來(lái)預(yù)編譯sass，我們輸入setup sass命令的時(shí)候ionic會(huì)添加gulp-sass等gulp插件，然后在ionic.project文件中添加"gulpStartupTasks"項(xiàng),在啟動(dòng)的時(shí)候增加gulp任務(wù),sass和watch。
{
"name": "express_client",
"app_id": "",
"gulpStartupTasks": [
"sass",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
}
這兩個(gè)任務(wù)一個(gè)是用來(lái)編譯sass文件，一個(gè)是用來(lái)監(jiān)控sass文件，一有改動(dòng)就重新編譯，以適配liveload，下面是gulpfile.js的有關(guān)配置
var paths = {
sass: ['./scss/**/*.scss']
};
gulp.task('default', ['sass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
});
可以看到sass任務(wù)會(huì)將源文件為'./scss/ionic.app.scss'的代碼用sass插件編譯之后寫入到'./www/css/'文件夾中(ionic.app.css)，然后再將該文件用minifyCss插件進(jìn)行最小化,重命名為ionic.app.min.css,然后寫入到./www/css/中。
最后，在www/index.html會(huì)加載該css:
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
在我們輸入ionic serve 命令的時(shí)候也會(huì)開(kāi)啟gulp任務(wù)，修改ionic.app.scss文件會(huì)實(shí)時(shí)編譯，然后體現(xiàn)到瀏覽器中。
