一、前提条件:

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. zookeeper No route to host

    2017-10-12 07:25:59,270 [myid:1] - WARN [QuorumPeer[myid=1]/0:0:0:0:0:0:0:0:2181:QuorumCnxManager@36 ...

  2. python、pip、whl安装和使用

    1 python的安装 首先,从python的官方网站 www.python.org下载需要的python版本,地址是这个: http://www.python.org/ftp/python/2.7. ...

  3. 一键安装lnmp-mysql(4)

    mysql(){cd $pathtar zxvf cmake-2.8.11.2.tar.gzcd cmake-2.8.11.2./configuremakemake installcd ..tar z ...

  4. logstash编写2以及结合kibana使用

    有时候根据日志的内容,可能一行不能全部显示,会延续在下一行,为了将上下内容关联在一起,于是codec插件中的multiline插件 就派上用场了,源日志内容: [2017-09-20T16:04:34 ...

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

    20145324 <Java程序设计>第7周学习总结 教材学习内容总结 第十一章 1.静态sleep()用于流程暂停指定时间,单位是毫秒 2.一个Thread被标记为Daemon线程,在所 ...

  6. Fiddler4调试工具配置使用笔记

    Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...

  7. react-native中使用自定义的字体图标iconfont

    iconfont图标库下载 可在 http://www.iconfont.cn 下载 下载完成后的目录中有字体文件: iconfont.ttf 拷贝字体文件 Android: 在 Android/ap ...

  8. Python遍历字典dict的几种方法

    #!/usr/bin/python dict={"a":"apple","b":"banana","o&quo ...

  9. 如果css足够强大了,你还会用编程的方式实现去实现css已有的功能吗?

    现在css3 都出来的,但是其实我由于一些原因,有些css2中都能支持的样式,我都没有使用过.我感觉我真的有必要静下心来,去看看那些东西,看看哪些以前都被忽视掉的. 今天我主要来讲三个对于我们编程经常 ...

  10. Java 线程池submit和execute

    submit方法: public abstract class AbstractExecutorService implements ExecutorService { protected <T ...