您的位置：首页 > 其它

ionic翻译：Sass

2016-02-20 17:37 232 查看

CSS可以独立使用，但也被设计成能够被开发人员加强。为简单起见，你可以加入你自己的CSS并且覆盖缺省属性。为了使功能更强大更灵活，核心用Sass写，并且简单地引入定制变量和混合类。虽然默认设计类似于iOS，但我们已经使CSS可以很容易地扩展成你自己的外观和感觉了。

如何使用Sass
启动项目默认挂载到项目的www/lib/ionic/css目录下的Ionic预编译CSS文件上，并链接到根index.html文件头部的app。然而，Ionic项目也可以使用Sass定制化，这使开发人员和设计人员在创建和维护CSS方面更有力。下面是两种为Ionic项目设置Sass的方式（ionic
setup sass命令简单地做了手动步骤）。一旦Ionic项目设置了Sass，然后 ionic
serve命令也会监听Sass的变化。
1.自动设置Sass

$ ionic setup sass

你可以开始在./scss/ionic.app.scss文件中写你的sass了。
2.手动设置Sass
（1）从Ionic项目的工作目录运行npm
install。这将安装 gulp.js 和一些简单的任务，例如

gulp-sass 和gulp-minify-css。
（2）从根

index.html

文件的

<head>

移除

<link
href="lib/ionic/css/ionic.css" rel="stylesheet">

（3）从根

index.html

文件的

<head>

移除<link
href="css/style.css" rel="stylesheet">
（4）添加<link
href="css/ionic.app.css" rel="stylesheet”>到根

index.html

文件的

<head>

（5）在

ionic.project

文件中添加JavaScript属性

"gulpStartupTasks":
["sass", "watch”]

（这也可以定制为任何你喜欢的gulp任务）。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航