sass 是一个css的预编译器,常见的预编译器有less,sass,stylus等,目前sass似乎更受青睐一些,bootstrap的最新版本以及ionic 都是用sass来构建页面效果的。这篇文章讲解如何在ionic工程使用sass,以及浅层次的分析一下ionic是如何构建sass代码的。

使用Sass

在工程文件夹中输入如下命令

1
$ ionic setup sass

这一步为我们的工程添加sass支持,之后我们可以在./scss/ionic.app.scss编写css代码。如果安装有问题,尝试调整node 版本,我使用4.1版本的node出错,切回0.12.7成功.

下面尝试使用sass改变页面效果,下面改变默认的positive颜色效果,以及增加$big-bg变量,代表背景,然后添加.scroll-bg类,为滚动页面添加背景图片,以下为./scss/ionic.app.scss中的代码,注意,自定义的效果添加在最后一行加载ionic库之前。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*
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";

然后对应的html代码:

1
2
3
4
5
<ion-view view-title="Search" >
<ion-content class="padding scroll-bg">
<h1 class="positive">Search</h1>
</ion-content>
</ion-view>

效果如下:

sass代码构建过程

ionic 使用gulp这个构建工具来预编译sass,我们输入setup sass命令的时候ionic会添加gulp-sass等gulp插件,然后在ionic.project文件中添加”gulpStartupTasks”项,在启动的时候增加gulp任务,sass和watch。

1
2
3
4
5
6
7
8
9
10
11
12
{
"name": "express_client",
"app_id": "",
"gulpStartupTasks": [
"sass",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
}

这两个任务一个是用来编译sass文件,一个是用来监控sass文件,一有改动就重新编译,以适配liveload,下面是gulpfile.js的有关配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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任务会将源文件为’./scss/ionic.app.scss’的代码用sass插件编译之后写入到’./www/css/‘文件夹中(ionic.app.css),然后再将该文件用minifyCss插件进行最小化,重命名为ionic.app.min.css,然后写入到./www/css/中。
最后,在www/index.html会加载该css:

1
2
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">

在我们输入ionic serve 命令的时候也会开启gulp任务,修改ionic.app.scss文件会实时编译,然后体现到浏览器中。

参考