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

1.首先需要在ionic项目中执行下面的命令:
ionic start CustomSass blank && cd CustomSass
ionic setup sass
注意:在执行这个命令的时候有可能会出错,然后就会提醒‘npm install -g gulp’,这时候按照提示执行这个命令,然后执行ionic setup sass就不会出错了。
2.执行完ionic setup sass之后,查看一下index.html,这时候它自动删除了ionic.css,以及style.css替换成ionic.app.css了

3.在ionic.project文件中添加:

"gulpStartupTasks": [
"sass",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]

4.执行ionic serve,在ionic.app.scss中写你的sass;

5.也可以在ionic > scss文件夹下建立一个新的scss文件:_uouoho.scss,然后在ionic.scss文件下@import该文件:‘uouoho',接着在_uouoho.scss中写入sass就可以了。

ionic使用sass的更多相关文章

  1. ionic 启用sass

    转入ionic项目目录,命令行下执行:ionic setup sass 提示编译器未装: You have specified Ionic CI to set up sass.However, you ...

  2. sass sublime text 2 gulp ionic

    sass 安装1.全局安装 sass 我的Mac 所以不用再安装Ruby ,直接在终端输入 gem install sass 然后在终端中输入 sass -v 出现 Sass 3.4.8 (selec ...

  3. ionic中应用sass

    在学习ionic过程中看到sass,总结了一下基本用法和问题解决办法1.首先需要一个ionic项目,并执行下面的命令ionic start CustomSass blank && cd ...

  4. ionic 项目中 使用 sass

    注: 1.先安装node-sass  -->> npm install --save node-sass --registry=https://registry.npm.taobao.or ...

  5. VS2015+cordova+ionic安装配置

    VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Andro ...

  6. ionic常用命令记录

    npm install -g ionic //安装ionic ionic lib update //更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower upda ...

  7. hybird app(混合式app开发)cordova ionic 创建相应平台的app

    hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...

  8. ionic添加scss

    Setup Sass Automatically 在进行以下操作之前要确保node比较新,以便正确安装node-sass 或 改用cnpm install node-sass安装(淘宝源) $ ion ...

  9. Ionic常见问题

    1.sh: 1: glxinfo: not found sudo apt-get update && sudo apt-get install mesa-utils 2.ionic s ...

随机推荐

  1. 广州项目实施步骤III_练习使用Keepalive保证HaProxy的高可用性

    CentOS6.4 配置HAProxy+Keepalived   安装HAProxy请参考 http://www.cnblogs.com/kgdxpr/p/3272861.html 安装Keepali ...

  2. 从零开始学android开发-adt-bundle-eclipse下的修改android app名称

    eclipse中,打开项目根目录中的AndoirManifest.xml文件,找到如下内容 <application android:allowBackup="true" a ...

  3. 使用命令行工具将Android应用转换成BlackBerry PlayBook应用

    昨天写了篇文章关于Android应用转换的,通过BlackBerry的在线转换工具将Android应用转换成BlackBerry PlayBook应用.有网友反映说方法有点麻烦,所以今天补上新的转换方 ...

  4. 编辑器TP

    http://www.itshipin.com/blog/archives/category/php/thinkphp

  5. ORACLE AUTOMATIC STORAGE MANAGEMENT翻译-第二章ASM Instance(4)完

    ASM安全 这个小节主要描写叙述与ASM相关的各种安全配置话题,像 配置ASM须要的userids.groupids:ASM权限如 SYSOPER,SYSDBA和新的SYSASM权限,最后还有ASM ...

  6. 算法设计 - LCS 最长公共子序列&&最长公共子串 &&LIS 最长递增子序列

    出处 http://segmentfault.com/blog/exploring/ 本章讲解:1. LCS(最长公共子序列)O(n^2)的时间复杂度,O(n^2)的空间复杂度:2. 与之类似但不同的 ...

  7. 项目源码--Android视频MV类网站客户端

    下载源码 技术要点: 1.视频MV类网站客户端框架 2.底部TAB功能模块 3.用户管理模块 4.结合优质动画技术,良好的用户体验 5.用户设置模块 6.sqlite数据库灵活的应用 7.源码带有非常 ...

  8. Android 自定义组合控件

    1, you need to add this kind of code to the constructors of your custom view which must extend ViewG ...

  9. 乐观锁(optimistic locking)与悲观锁(pessimistic locking)

    首先,乐观锁(optimistic locking)与悲观锁(pessimistic locking)基本是针对数据处理来说,也就是跟数据库有关的术语,目的是为了解决并发处理时所遇到的相关性能问题,以 ...

  10. JSON使用——获取网页返回结果是Json的代码

    public String getWebData(String strUrl){ String json = null; try { URL url = new URL(strUrl); HttpUR ...