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. jquery easyui-linkButton获取和设置按钮text并且解决火狐不支持innerText的方法

    <a href="javascript:test" id="btn" class="easyui-linkbutton" iconCl ...

  2. sql server对并发的处理-乐观锁和悲观锁【粘】

    假如两个线程同时修改数据库同一条记录,就会导致后一条记录覆盖前一条,从而引发一些问题. 例如: 一个售票系统有一个余票数,客户端每调用一次出票方法,余票数就减一. 情景: 总共300张票,假设两个售票 ...

  3. How to Send Information (String, Image, Record) Between Two Applications

    http://delphi.about.com/od/windowsshellapi/a/wm_copydata.htm here are many situation when you need t ...

  4. CMSIS Example - Mail and Timer

    #include <stdint.h> #include "bsp-fifisdr.h" #include "lpclib.h" #include ...

  5. Eclipse配置PyDev插件

    安装python解释器 安装PyDev: 首先需要去Eclipse官网下载:http://www.eclipse.org/,Eclipse需要JDK支持,如果Eclipse无法正常运行,请到Java官 ...

  6. 一个jQuery扩展工具包

    带有详尽注释的源代码: var jQuery = jQuery || {}; // TODO // ###################################string操作相关函数### ...

  7. 使用SurfaceView和MediaPlayer实现视频做为背景

    场景:像我们在Uber应用开场,看到一一段视频作为開始.这样子让用户非常快投入应用使用的场景中去,这样的以视频作为开场的应用,我们是不是认为非常高大上呢,哈哈,事实上是使用了SerfaceView去载 ...

  8. TOJ3651确定比赛名次

    确定比赛名次   Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByte Total Submit: 23          ...

  9. linux下的ls命令

    在LINUX系统中有一个重要的概念:一切都是文件.其实这是UNIX哲学的一个体现,而Linux是重写UNIX而来,所以这个概念也就传承了下来.在UNIX系统中,把一切资源都看作是文件,包括硬件设备.U ...

  10. PEAR:使用PHPDoc轻松建立你的PEAR文档

    对于一个开发人员,文档总是最感到头疼的事情之一.而且,很可能你对待文档会采取截然不同的2种态度: 当你使用别人的代码库的时候,最希望得到的是它的技术文档,尤其是当时间很紧,而你又不得不硬着头皮去读那些 ...