一、前提条件:

1.安装ruby,如果我没记错的话,mac自带ruby,终端输入 ruby -v ,回车,如果显示ruby的版本号,则说明ruby环境已经安装好了。如果没有,自行安装ruby。例如我的mac显示:

ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin15]

2.安装sass,过程与win系统的一样,安装好后,终端输入 sass -v,回车,若显示sass版本号,说明已经安装好了。

例如我的mac显示:

tydeMacBook-Pro:~ ty$ sass -v
Sass 3.4.21 (Selective Steve)

二、在webstorm中配置scss watcher

1. 打开一个sass文件,上方会显示一条提示信息如下,点击Add watcher,打开scss watcher的配置窗口。

2.在新打开的窗口中,在Program一项中配置scss.bat的路径。然后点OK退出。至此配置完成,以后只要是在这个项目内,任意地方编辑sass文件、都会自动的生成对应的CSS文件和更新CSS代码。

ps:我发现这个scss watcher并不好用。提示我找不到compass/reset,我估计是因为我的sass文件里引用的模块的路径的问题,或者其他配置问题,反正最后我还是干脆回终端窗口里用compass compile来转换sass到CSS了。

mac下webstorm添加scss watcher的更多相关文章

  1. (原)Mac下Apache添加限制IP线程模块:mod_limitipconn.so

    1.下载:http://dominia.org/djao/limit/mod_limitipconn-0.24.tar.bz2 解压到一个目录:我的是~/Download/mod_limitipcon ...

  2. mac下 WebStorm下主题包安装

    mac下: 主题包 1.mac下,点击桌面,使用shift+command+G 输入:~/Library/Preferences 前往(mac查找安装目录的方法,因为默认这些文件夹是隐藏的),进入We ...

  3. mac下Apache添加限速模块mod_bw

    官方文档: Apache2 - Mod_bw v0.7 Author : Ivan Barrera A. (Bruce) HomePage : Http://Ivn.cl/apache & h ...

  4. Mac 下 Eclipse 添加 Dynamic Web Project 并配置 Tomcat

    最近拿到了一个 Dynamic Web Project,我的 Mac 上的 Eclipse 之前没有过这类型的项目,所以导入之后无法正常运行.下面是我记录的如何配置 Eclipse 使之能够运行 Dy ...

  5. Mac下WebStorm直接运行ReactNative项目

    1.首先点击WebStorm右上方的下拉箭头弹出的Edit Configurations…. 2.然后会进入一个配置页面.点击左上方的+.在弹出的列表中选中npm. 3.在右边的配置框中,先选择Com ...

  6. Mac 下 WebStorm 配置go语言开发环境

    一.下载安装WebStorm,我的是 二.在WebStorm 中安装go插件 三.在本机安装go开发环境,直接装pkg文件,https://golang.org/doc/install 四.在WebS ...

  7. mac下php添加openssl扩展

    进入php源码目录 cd ext/openssl mv config0.m4 config.m4 phpize && ./configure  && make & ...

  8. mac 下webstorm调节字体大小

    ctr+shift+A功能可以搜索对应功能. 在弹出框中输入Zoom可以轻松设置. 而且有关zoom的功能全部列出. 真是方便. 搜索到change font size with ctrl + whe ...

  9. Mac下如何安装WebStorm + 破解

    1.官网下载       下载地址   选择好系统版本以后,点击DOWNLOAD        2.安装 双击下载好的安装包.将WebStromt拖入application文件夹,然后在Launchp ...

随机推荐

  1. Python日期字符串比较

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 需要用python的脚本来快速检测一个文件内的二个时间日期字符串的大小,其实实现很简单,首先一些 ...

  2. thinkerCMS是一款thinkphp写的微型cms框架可以参考下

    http://www.thinkphp.cn/code/1764.html                       thinkphp官网thinkercms介绍 http://cms.thinke ...

  3. java压缩多个文件

    首先创建一个工具类,定义好接口,这里的参数1:fileList:多个文件的path+name2: zipFileName:压缩后的文件名 下面是代码,注释已经很详细了 public class ZIP ...

  4. 20145307第八周JAVA学习报告

    20145307<Java程序设计>第8周学习总结 教材学习内容总结 通用API 日志API 1.java.util.logging包提供了日志功能相关类与接口,使用日志的起点是logge ...

  5. 20145324 《Java程序设计》第3周学习总结

    20145324 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 1.要产生对象必须先定义类,类是对象的设计图,对象是类的实例,建立实例要用new 2.参数名称与对象数据成员 ...

  6. Mac系统安装MyEclipse

    参考链接 http://blog.csdn.net/jin_kwok/article/details/51925523

  7. kylin入门到实战:入门

    版权申明:转载请注明出处.文章来源:http://bigdataer.net/?p=292 排版乱?请移步原文获得更好的阅读体验 1.概述 kylin是一款开源的分布式数据分析工具,基于hadoop之 ...

  8. C#(Wpf)实现小键盘

    花了一天时间小键盘基本功能已完成,先看看效果图吧! 默认: Shift: Caps Lock: Button style <Style x:Key="KeyButton" T ...

  9. 数据结构实习 - problem K 用前序中序建立二叉树并以层序遍历和后序遍历输出

    用前序中序建立二叉树并以层序遍历和后序遍历输出 writer:pprp 实现过程主要是通过递归,进行分解得到结果 代码如下: #include <iostream> #include &l ...

  10. dijkstra算法理解+模板

    2017-09-17 21:10:45 writer:pprp 看了看dijkstra算法,用自己语言总结一下主要过程吧, 首先,明确这个算法用处是在于计算单源最短路径问题并且边权非负,给出一个起点可 ...