1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551

   安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去。
 
    安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确。
 
 
2.通过Ruby安装Sass
    启动Ruby中的“Start Command Prompt with Ruby”

    在命令行中输入:
  1. gem sources --remove https://rubygems.org/
  2. gem source -a http://ruby.taobao.org
  3. gem install sass

因为GFW的缘故,特将淘宝的Ruby镜像添加进来,安装Sass。

安装结束后在命令行中运行 sass -v 能看到对应的版本则说明安装正确。
 
3.启动WebStorm,打开已有项目,创建一个scss文件。
    这是在右上角会显示Add Watcher按钮,点击它,在弹出的对话框中,将Program的路径设为Ruby中scss.bat的路径。
 
 
    也可以修改css的输出路径等等。
 
    主要步骤已经完成,现在在我们修改scss文件的时候,webstorm会为我们自动生成对应的css文件,别忘记在html中引入这个css文件。
 
    测试修改ionic的主题颜色,在之前创建的scss文件中添加以下内容并运行。

  1. $positive: #00FF00;
  2. @import "../lib/ionic/scss/ionic";
    就会发现之前使用蓝色positive的内容全部变成了绿色。

轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher的更多相关文章

  1. (转)轻松学习JavaScript三:JavaScript与HTML的结合

    摘自:http://blog.csdn.net/erlian1992 HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScri ...

  2. 轻松学习Ionic (一) 搭建开发环境,并创建工程

    1.准备工作     下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm 运行环境),Android SDK (Android编译)     不 ...

  3. [转]轻松学习Ionic (四) 修改应用图标及添加启动画面(更新官方命令行工具自动生成)

    本文转自:http://blog.csdn.net/zapzqc/article/details/42237935 由于Ionic更新了命令行工具,以后修改应用图标和添加启动画面就简单了,最新方法见最 ...

  4. 轻松学习Ionic (四) 修改应用图标及添加启动画面(更新官方命令行工具自动生成)

    由于Ionic更新了命令行工具,以后修改应用图标和添加启动画面就简单了,最新方法见最下方:   应用图标:   1.在整个项目所在文件夹下创建res文件夹,里边再分别创建两个文件夹android和io ...

  5. 学习DSP(三)安装C2833x/C2823x C/C++ 头文件和外设示例-压缩包

    进入http://www.ti.com.cn/product/cn/tms320f28335 下载C2833x/C2823x C/C++ 头文件和外设示例 即SPRC530,目前最新版本是V131.安 ...

  6. 轻松学习Ionic (二) 为Android项目集成Crosswalk(更新官方命令行工具)

        现在集成crosswalk不用这么麻烦了!官方的命令行工具已经能让我们一步到位,省去很多工作,只需在cmd中进入项目所在目录(不能有中文目录,还得FQ),执行: ionic browser a ...

  7. python+NLTK 自然语言学习处理三:如何在nltk/matplotlib中的图片中显示中文

    我们首先来加载我们自己的文本文件,并统计出排名前20的字符频率 if __name__=="__main__": corpus_root='/home/zhf/word' word ...

  8. 在vue2.x中安装sass并配置

    在vue中安装sass先检查系统中有没有安装sass,在命令行中输入 sass -v 表示sass在电脑中已有,否者可以参考我这篇博客安装Sass遇到的坑 一.先安装sass cmd打开命令行,到项目 ...

  9. MyBatis学习系列三——结合Spring

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring MyBatis在项目中应用一般都要结合Spring,这一章主要把MyBat ...

随机推荐

  1. uvalive 5031 Graph and Queries 名次树+Treap

    题意:给你个点m条边的无向图,每个节点都有一个整数权值.你的任务是执行一系列操作.操作分为3种... 思路:本题一点要逆向来做,正向每次如果删边,复杂度太高.逆向到一定顺序的时候添加一条边更容易.详见 ...

  2. 在中国Windows Azure服务中创建应用程序的一些不同之处

    Azure 中的托管服务由一个应用程序(用于在托管服务中运行)和 XML 配置文件(定义托管服务的运行方式)组成.托管服务同时使用服务定义文件 (.csdef) 和配置文件 (.cscfg).有关详细 ...

  3. 【转】开源C/C++网络库比较

    在开源的C/C++网络库中, 常用的就那么几个, 在业界知名度最高的, 应该是ACE了, 不过是个重量级的大家伙, 轻量级的有libevent, libev, 还有 Boost的ASIO. ACE是一 ...

  4. 【Hadoop学习】Apache Hadoop项目简介

    正在撰写,稍后来访……

  5. 转载Entity Framework 4.1 DbContext使用记之三——如何玩转实体的属性值?

    Entity Framework 4.1 DbContext使用记之一——如何查找实体? DbSet.Find函数的使用与实现 Entity Framework 4.1 DbContext使用记之二— ...

  6. 转载.NET 4.0中的泛型的协变和逆变

    先做点准备工作,定义两个类:Animal类和其子类Dog类,一个泛型接口IMyInterface<T>, 他们的定义如下:   public class Animal { } public ...

  7. 设计模式23---设计模式之装饰模式(Decorator)(结构型)

    1.装饰模式讲解 1.1定义 动态的给一个对象添加一些额外的职责.就增加功能来说,装饰模式比生成子类更加灵活. 1.2装饰模式要点 透明的给一个对象增加功能,换句话说就是要给一个对象增加功能,但是不能 ...

  8. IOS开发--C语言入门--如何结合Terminal和Vim开发C语言程序

    一直以来都想着挤出时间,记录开发之路的点点滴滴(现在记录已成回忆),和大家一起分享,开发人员总是在沟通和相互学习中提高自身的能力.路过的大神也好初学者也罢,若发现文章中又观点不对的,还望大家指出. 现 ...

  9. Oracle- 数据库的备份

    Oracle中对数据对象和数据的管理,无疑都是使用PL/SQL Developer来进行管理,该工具也提供给我们很多方便.快捷的操作,使得我们不再为Oracle本身丑陋.难用的UI而抱怨.由于我们一般 ...

  10. 把SVN添加到windows服务

    sc create SVN_Service binpath= "D:\DevTools\Subversion\bin\svnserve.exe --service --root D:\Dev ...