安装sass并在webstorm中为scss添加watcher

2019-08-01 17:05:24

参考链接 安装sass并在webstorm中为scss添加watcher

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


   安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去。



    安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确。




2.通过Ruby安装Sass

    启动Ruby中的“Start Command Prompt with Ruby”

    在命令行中输入:

gem sources --remove https://rubygems.org/

gem source -a http://ruby.taobao.org

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文件中添加以下内容并运行。

$positive: #00FF00;

 

@import "../lib/ionic/scss/ionic";


    就会发现之前使用蓝色positive的内容全部变成了绿色。




  • 2020-04-17 10:20:47

    GreenSocks Animation Platform详细工作机制以及TweenMax用法

    GSAP(GreenSocks Animation Platform)是一个性能较好的前端动画库。最近在写一个前端SVG动画编辑器时选择了它作为底层的动画库。为了减少踩坑,我大致浏览了它的源代码,这篇文章主要是对我的理解进行记录。 我会先简单介绍一下这个动画库的API,再介绍它的插件机制,最后会从一个用例出发跟踪其运行机制。

  • 2020-04-17 10:39:02

    CSS 滤镜技巧与细节,实现火焰,融合等特效

    简单来说,CSS 滤镜就是提供类似 PS 的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。本文就会围绕这些滤镜展开,看看具体能怎么使用或者玩出什么花活。

  • 2020-04-17 10:42:29

    (三)TweenMax运动效果

    运动效果 实例化对象.set() 立刻运动到指定地点,不用加时间

  • 2020-04-17 11:19:55

    Vue中的is和操作DOM

    vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样

  • 2020-04-17 11:27:48

    TweenMax中文初级教程一

    TweenMax.js集成了GreenSock动画平台的大部分核心功能,且具有极高的兼容性。

  • 2020-04-17 11:28:35

    TweenMax中文初级教程二

    TimelineMax是GreenSock 动画平台中的动画组织、排序、管理工具,可创建时间轴(timeline)作为动画或其他时间轴的容器,这使得整个动画控制和精确管理时间变得简单,避免了通过反复delay和回调进行动画。 作者:李霖弢 链接:https://www.jianshu.com/p/8c0361e43bf5 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2020-04-17 11:28:57

    TweenMax中文初级教程三

    动画关键词:CSS(一般可以省略) CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画 在CSSPlugin中CSS属性需要写成驼峰式,例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位,CSSPlugin还可以在不同的单位间做动画:

  • 2020-04-17 11:29:23

    TweenMax中文初级教程四

    用于滚动窗口(类似于window.scrollTo(x, y))或DOM元素(如myDiv.scrollTop = y; myDiv.scrollLeft = x;)。滚动窗口时使用window作为动画目标。

  • 2020-04-17 14:06:29

    图片解释EaseIn,EaseOut,EaseInOut

    1.EaseIn:即缓动发生在入口处,也就是刚开始的时候。 2.EaseOut:即缓动发生在出口处,也就是结束之前。 3.EaseInOut:就是两边都有缓动了.

  • 2020-04-21 14:47:13

    Redis危险命令重命名、禁用

    flushdb,清空数据库 flushall,清空所有记录,数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键