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. magiczoom 插件去版本(放大镜效果)

    在放大镜效果中代码中有 Please upgrade to full version of Magic Zoom Plus™ 去除办法: 在 magiczoom 去版本 magiczoomplus.j ...

  2. 使用多个Worker的时候Odoo的系统日志配置

    当我们开启Wokrer来启动Odoo的时候,用默认的日志会出现日志丢失的问题,这个是logger的问题:多个进程对单个文件写入日志.有一个简单的解决办法:配置openerp-server.conf,开 ...

  3. Map排序——按key排序,按value排序

    注:转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5959279.html 上一篇博文谈到了集合类的自定义排序方式,那么进一步扩展开来,与集合同等重要的Map有 ...

  4. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  5. SOA服务开发小计

    http://item.jd.com/11181846.html#comment SOA面向服务架构——SOA的概念 http://www.cnblogs.com/leslies2/archive/2 ...

  6. ab性能并发测试语法

    ab测试语法ab -n 全部请求数 -c 并发数 测试url 例如:ab -n 10000 -c 1000 http://myweb.com/test.html Server Software: Ap ...

  7. c++中获取代码运行时间

    include<ctime> time_t begin,end;   begin=clock(); { .............//被测试的代码 } end=clock();  cout ...

  8. radvd.conf RADVD配置文件内容部分解析

    interface eth0{ AdvSendAdvert on; #启用路由器公告(RA)功能 MinRtrAdvInterval ; #每隔30-100秒间隔发送公告消息 MaxRtrAdvInt ...

  9. C# 多线程处理相关说明: WaitHandle,waitCallback, ThreadPool.QueueUserWorkItem

    class TestThread { static void Main() { //使用WaitHandle静态方法阻止一个线程,直到一个或多个同步对象接收到信号 WaitHandle[] waitH ...

  10. codeforces 377A. Puzzles 水题

    A. Puzzles Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/problem/33 ...