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. css学习笔记 7

    background-position属性值为百分比的时候,第一个百分比表示水平方向的距离,第二个表示垂直方向上的距离. text-indent的主要作用是为段落设置首行缩进,只能应用于块级元素.该属 ...

  2. 如何在maven项目的pom.xml文件中添加jar包

    在使用maven进行项目开发时,我们需要在pom.xml文件中添加自己所需要的jar包.这就要求我们获取jar包的groupId和artifactId. 我们可以在一些maven仓库上搜索我们所需要的 ...

  3. Sigleton 单例模式 的简单应用

    需求:一个简单的后台java程序,收集信息,并将信息发送到远端服务器. 实现:实现一个后台线程,实时处理发送过来的信息,并将信息发送到服务器. 技术要点: 1.单例模式 2.队列 并没有实现全部代码, ...

  4. HDU 4533 威威猫系列故事——晒被子

    题目链接 扫描线可做,然后当时比赛后问虎哥,他说可以标记,然后拖了很久,今天从早上折腾到晚上,终于把两种情况写出来,分析太弱.改天扫描线,再来一次. 被子如果被y = x 穿过,可以分成两部分,上和下 ...

  5. TTB 基本

    中文名 ,线程构建模块 外文名 Thread Building Blocks 缩    写 TBB 开    发 intel 目录 1线程构建模块 2黑体亮温 3斜交载重轮胎 4串联球轴承     1 ...

  6. MySQL5.7新特性笔记

    001.用户验证方式上的变化 MySQL5.7已经不要支持mysql_old_password验证插件,也不再支持old_password函数,也就说old_passwords也就不能被设置成1了.

  7. spring-session实现分布式集群session的共享

    前言 HttpSession是通过Servlet容器创建和管理的,像Tomcat/Jetty都是保存在内存中的.但是我们把应用搭建成分布式的集群,然后利用LVS或Nginx做负载均衡,那么来自同一用户 ...

  8. .NET开发微信小程序-上传图片到服务器

    1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...

  9. 基于 Nginx 的 HTTPS 性能优化

    前言 分享一个卓见云的较多客户遇到HTTPS优化案例. 随着相关浏览器对HTTP协议的“不安全”.红色页面警告等严格措施的出台,以及向 iOS 应用的 ATS 要求和微信.支付宝小程序强制 HTTPS ...

  10. UE4物理动画使用

    Rigid Body Body的创建. 对重要骨骼创建Body,保证Body控制的是表现和变化比较大的骨骼. 需要对Root创建Body并绑定,设置为Kinematic且不启用物理.原因是UPrimi ...