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. 关于favicon.ico的使用

    http://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html

  2. Jquery 操作 radio选中值

    1.获取radio选中值 1.1  $('input:radio:checked').val(); 1.2  $("input[type='radio']:checked").va ...

  3. VC++ 中滑动条(slider控件)使用 [转+补充]

    滑动控件slider是Windows中最常用的控件之一.一般而言它是由一个滑动条,一个滑块和可选的刻度组成,用户可以通过移动滑块在相应的控件中显示对应的值.通常,在滑动控件附近一定有标签控件或编辑框控 ...

  4. (剑指Offer)面试题23:从上到下打印二叉树

    题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 很明显,这是一个广度优先遍历. 需要一个队列容器来保存结点,具体操作: 1.将根结点压入队列中,并打印根结点:如果根结点有子结点 ...

  5. Objective-C运行时编程 - 实现自动化description方法的思路及代码示例

    发布自米高 | Michael - 博客园,源地址:http://www.cnblogs.com/michaellfx/p/4232205.html,转载请注明. 本文结构 基础实现 性能优化 参考 ...

  6. IIS 7.0 and Web Farms

    1. IIS 6 IIS 6.0 was capable of scaling out to virtually any number of web servers and had tools lik ...

  7. Codeforces Round #136 (Div. 1)C. Little Elephant and Shifts multiset

    C. Little Elephant and Shifts Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/pro ...

  8. 从头学Android系列

    从头学Android系列 http://blog.csdn.net/worker90/article/category/888358

  9. google对js延迟加载方案的建议

    浏览器在执行JavaScript代码时会停止处理页面,当页面中有很多JavaScript文件或代码要加载时,将导致严重的延迟.尽管可以使用defer.异步或将JavaScript代码放到页面底部来延迟 ...

  10. XCode4中的文本查找和文本替换功能

    转自:http://blog.csdn.net/zhuzhihai1988/article/details/7843186 1.如果是在打开的文档范围内:       查找: Command+ F   ...