zoukankan      html  css  js  c++  java
  • 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文件会实时编译,然后体现到浏览器中。

  • 相关阅读:
    7人脸识别
    1图片视频文件操作基础
    3直方图与二值化,图像梯度
    6模板匹配(人脸匹配案例)
    基础习题
    碎片知识点整理
    详解:MySQL数据表损坏的正确修复方案
    前端开发:模块化 — 高效重构
    分享几个基于jQuery不错的前端相册展示插件代码
    程序员编程10年的心得和体会
  • 原文地址:https://www.cnblogs.com/gyangfeng/p/6558596.html
Copyright © 2011-2022 走看看